/* ../../sites/msl-mensch-und-gesundheit-7/app/globals.css */
:root {
  --ink:#edf8fb;
  --muted:#9db9c5;
  --panel:#0b2638;
  --accent:#72dbe2;
  --accent-rgb:114,219,226;
  --danger:#ff8878;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: #061621;
  color: var(--ink);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
button {
  font: inherit;
}
.learning-path {
  --accent:#72dbe2;
  --accent-rgb:114,219,226;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(var(--accent-rgb), .13),
      transparent 29%),
    radial-gradient(
      circle at 87% 85%,
      rgba(110, 80, 180, .12),
      transparent 34%),
    linear-gradient(
      145deg,
      #061520,
      #0a2435 58%,
      #071824);
  transition: background .5s;
}
.tone-blue,
.tone-cyan {
  --accent:#6fdcf0;
  --accent-rgb:111,220,240;
}
.tone-violet,
.tone-indigo {
  --accent:#b39af5;
  --accent-rgb:179,154,245;
}
.tone-mint,
.tone-teal,
.tone-lime {
  --accent:#72deb3;
  --accent-rgb:114,222,179;
}
.tone-rose,
.tone-coral {
  --accent:#ff9aa8;
  --accent-rgb:255,154,168;
}
.tone-gold,
.tone-orange {
  --accent:#f2c46e;
  --accent-rgb:242,196,110;
}
.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .12;
  pointer-events: none;
}
.ambient-one {
  width: 35vw;
  height: 35vw;
  left: -12vw;
  top: 12vh;
  background: var(--accent);
  animation: ambientFloat 15s ease-in-out infinite alternate;
}
.ambient-two {
  width: 30vw;
  height: 30vw;
  right: -10vw;
  bottom: -8vh;
  background: #856fe2;
  animation: ambientFloat 18s ease-in-out infinite alternate-reverse;
}
@keyframes ambientFloat {
  to {
    transform: translate(6vw, -5vh) scale(1.15);
  }
}
.topbar {
  height: 75px;
  padding: 0 clamp(18px, 3.5vw, 60px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: relative;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(4, 17, 27, .48);
  backdrop-filter: blur(14px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  color: #071a24;
  background: var(--accent);
  box-shadow: 0 0 25px rgba(var(--accent-rgb), .2);
}
.brand-mark svg,
.start-symbol svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand strong,
.brand small {
  display: block;
}
.brand strong {
  font-size: 13px;
  letter-spacing: .07em;
}
.brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.path-title {
  color: #bed1d9;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .05em;
}
.page-count {
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #7594a3;
  font-size: 13px;
}
.page-count span {
  color: var(--accent);
  font-size: 24px;
  font-weight: 900;
}
.page-count i {
  font-style: normal;
}
.progress-track {
  height: 3px;
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, .06);
}
.progress-track span {
  height: 100%;
  display: block;
  border-radius: 3px;
  background:
    linear-gradient(
      90deg,
      var(--accent),
      #fff0b0);
  box-shadow: 0 0 15px rgba(var(--accent-rgb), .65);
  transition: width .45s ease;
}
.slide {
  min-height: calc(100svh - 78px);
  padding: clamp(34px, 5vh, 70px) clamp(20px, 4.2vw, 76px) 112px;
  display: grid;
  grid-template-columns: minmax(0, 1.56fr) minmax(300px, .74fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  position: relative;
  z-index: 2;
  animation: slideReveal .55s ease both;
}
@keyframes slideReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.visual-column {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-column {
  max-width: 530px;
}
.eyebrow {
  margin: 0 0 15px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.content-column h1 {
  margin: 0;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.memory-card {
  margin-top: 25px;
  padding: 18px 20px;
  border-left: 4px solid var(--accent);
  border-radius: 0 19px 19px 0;
  background:
    linear-gradient(
      90deg,
      rgba(var(--accent-rgb), .13),
      rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.memory-card span {
  color: var(--accent);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .18em;
}
.memory-card p {
  margin: 8px 0 0;
  color: #e6f0f4;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.46;
  font-weight: 720;
}
.fact-row {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}
.fact-row > span {
  min-height: 52px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  color: #c8dbe2;
  background: rgba(255, 255, 255, .035);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
}
.fact-row b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: #071820;
  background: var(--accent);
  font-size: 15px;
}
.visual-board,
.image-board {
  width: 100%;
  max-width: 920px;
  aspect-ratio: 1.6;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: clamp(24px, 3vw, 42px);
  background:
    linear-gradient(
      150deg,
      #0b2b3d,
      #061923 70%);
  box-shadow: 0 34px 78px rgba(0, 0, 0, .38);
}
.visual-board::after,
.image-board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), inset 0 -85px 100px rgba(3, 13, 20, .35);
}
.image-board > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
  animation-play-state: paused !important;
}
.controls {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(785px, calc(100% - 26px));
  height: 66px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 22px;
  background: rgba(5, 20, 31, .88);
  backdrop-filter: blur(22px);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .42);
}
.control-group {
  display: flex;
  align-items: center;
  gap: 5px;
}
.icon-button,
.text-control,
.voice-control,
.speed-control {
  height: 48px;
  border: 0;
  border-radius: 14px;
  color: #dcebf0;
  background: transparent;
  cursor: pointer;
  transition: .2s;
}
.icon-button {
  width: 48px;
  display: grid;
  place-items: center;
}
.icon-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-button:hover,
.text-control:hover,
.voice-control:hover,
.speed-control:hover {
  background: rgba(255, 255, 255, .08);
}
.icon-button.active {
  color: #071922;
  background: var(--accent);
}
.icon-button:disabled {
  opacity: .25;
  cursor: default;
}
.text-control,
.voice-control {
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
}
.voice-control {
  color: var(--accent);
}
.voice-control.natural::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #70e39c;
  box-shadow: 0 0 9px #70e39c;
}
.speed-control {
  width: 52px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 900;
}
.voice-menu,
.transcript {
  position: fixed;
  z-index: 40;
  bottom: 98px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 22px;
  background: rgba(7, 25, 38, .98);
  backdrop-filter: blur(25px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .48);
  animation: popup .24s ease both;
}
@keyframes popup {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.voice-menu {
  left: 50%;
  width: min(430px, calc(100% - 30px));
  transform: translateX(-50%);
}
.voice-menu > div:first-child,
.transcript > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.voice-menu > div:first-child span,
.transcript > div:first-child span {
  color: var(--accent);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.voice-menu > div:first-child button,
.transcript > div:first-child button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  color: white;
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
  font-size: 20px;
}
.voice-menu > p {
  margin: 7px 0 12px;
  color: #91acb8;
  font-size: 14px;
  line-height: 1.5;
}
.voice-menu > button {
  width: 100%;
  min-height: 44px;
  margin-top: 5px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #d8e7ec;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  text-align: left;
  font-size: 15px;
}
.voice-menu > button.selected {
  border-color: rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .11);
}
.voice-menu > button b {
  color: var(--accent);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.voice-quality {
  margin: 9px 0 !important;
  padding: 9px 11px;
  display: block !important;
  border-radius: 11px;
  background: rgba(255, 255, 255, .04);
}
.voice-quality b,
.voice-quality span {
  display: block;
}
.voice-quality b {
  color: #75e4a0;
  font-size: 15px;
}
.voice-quality span {
  margin-top: 3px;
  color: #9cb6c2;
  font-size: 14px;
}
.voice-quality.limited b {
  color: #ffc36b;
}
.voice-preview {
  margin-top: 10px !important;
  justify-content: center !important;
  color: #071922 !important;
  background: var(--accent) !important;
  font-weight: 900;
}
.transcript {
  right: clamp(15px, 4vw, 55px);
  width: min(520px, calc(100% - 30px));
}
.transcript p {
  margin: 12px 0 0;
  color: #dae8ed;
  font-size: 16px;
  line-height: 1.64;
}
.transcript small {
  display: block;
  margin-top: 10px;
  color: #ff9b8c;
}
.msl-intro {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #06131f;
  transition: opacity .45s ease;
}
.msl-intro.finishing {
  opacity: 0;
  pointer-events: none;
}
.msl-intro-card {
  width: min(530px, calc(100vmin - 44px));
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border: 5px solid white;
  border-radius: 23px;
  background: #101a29;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .48);
}
.msl-intro-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.msl-intro-start {
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 3;
  min-width: 48%;
  padding: 11px 18px;
  transform: translateX(-50%);
  border: 3px solid white;
  border-radius: 999px;
  color: white;
  background: rgba(0, 96, 218, .94);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .38);
  font-weight: 900;
  cursor: pointer;
}
.msl-intro.playing .msl-intro-start {
  opacity: 0;
  pointer-events: none;
}
.msl-intro-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 7px;
  background: rgba(255, 255, 255, .24);
}
.msl-intro-progress-bar {
  width: 0;
  height: 100%;
  background: #0d93ed;
  box-shadow: 0 0 10px white;
}
.msl-intro.counting .msl-intro-progress-bar {
  animation: introProgress 8s linear forwards;
}
@keyframes introProgress {
  to {
    width: 100%;
  }
}
.start-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  padding: clamp(25px, 6vw, 90px);
  background:
    linear-gradient(
      90deg,
      rgba(3, 15, 23, .98),
      rgba(3, 15, 23, .76));
}
.start-card {
  max-width: 760px;
}
.start-symbol {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  color: #071b22;
  background: var(--accent);
  box-shadow: 0 0 0 12px rgba(var(--accent-rgb), .07), 0 25px 55px rgba(var(--accent-rgb), .18);
}
.start-card > p {
  margin: 26px 0 9px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}
.start-card h2 {
  margin: 0;
  font-size: clamp(42px, 6.4vw, 86px);
  line-height: .94;
  letter-spacing: -.055em;
}
.start-note {
  margin-top: 22px;
  display: block;
  color: #b4c9d1;
  font-size: 14px;
}
.start-card > button {
  margin-top: 28px;
  padding: 15px 18px 15px 22px;
  display: flex;
  align-items: center;
  gap: 25px;
  border: 0;
  border-radius: 17px;
  color: #061923;
  background: var(--accent);
  box-shadow: 0 16px 36px rgba(var(--accent-rgb), .22);
  font-weight: 900;
  cursor: pointer;
}
.start-card > button svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.start-card > small {
  margin-top: 12px;
  display: block;
  color: #89a4b0;
}
.hero-board {
  background:
    radial-gradient(
      circle at 81% 24%,
      rgba(255, 178, 155, .16),
      transparent 26%),
    linear-gradient(
      150deg,
      #0b3343,
      #071923);
}
.hero-board > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-dasharray: 13 11;
  marker-end: url(#heroArrow);
  animation: dash 4s linear infinite;
}
.hero-board svg marker path,
.hormone-board svg marker path,
.sperm-board svg marker path,
.conception-board svg marker path {
  fill: var(--accent);
}
@keyframes dash {
  to {
    stroke-dashoffset: -120;
  }
}
.hero-person {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #bcd0d8;
  font-size: 14px;
  font-weight: 800;
}
.hero-person span {
  display: block;
  position: relative;
  border-radius: 46% 46% 24% 24%;
  background:
    linear-gradient(
      145deg,
      #9ce8e1,
      #2d7e89);
  box-shadow: 0 18px 28px rgba(0, 0, 0, .28);
}
.hero-person span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -24%;
  width: 45%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #d7a889;
}
.hero-person b {
  margin-top: 10px;
}
.hero-person.child {
  left: 8%;
  bottom: 14%;
}
.hero-person.child span {
  width: 55px;
  height: 125px;
}
.hero-person.teen {
  left: 39%;
  top: 27%;
}
.hero-person.teen span {
  width: 68px;
  height: 175px;
}
.hero-person.adult {
  right: 13%;
  top: 7%;
}
.hero-person.adult span {
  width: 78px;
  height: 210px;
}
.hero-cell {
  position: absolute;
  right: 7%;
  bottom: 8%;
  z-index: 4;
  width: 190px;
  height: 112px;
  padding-left: 98px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 20px;
  background: rgba(5, 25, 36, .84);
  font-size: 14px;
  line-height: 1.4;
}
.hero-cell i {
  position: absolute;
  width: 64px;
  height: 64px;
  left: 18px;
  top: 23px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 35%,
      #ffe9a4,
      #d78c55 58%,
      #7d3d39);
  box-shadow: 0 0 20px rgba(255, 193, 102, .25);
  animation: cellDivide 5s ease-in-out infinite;
}
.hero-cell i:nth-child(2) {
  opacity: 0;
  transform: translateX(28px) scale(.7);
  animation-delay: 2.5s;
}
@keyframes cellDivide {
  0%, 20% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  55%, 75% {
    transform: translateX(-15px) scale(.78);
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}
.hero-note {
  position: absolute;
  left: 4%;
  top: 5%;
  z-index: 4;
  padding: 9px 12px;
  border-left: 3px solid var(--accent);
  color: #c5d7dd;
  background: rgba(5, 24, 35, .68);
  font-size: 14px;
  font-weight: 750;
}
.timing-board {
  padding: 42px 46px;
}
.timing-board header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  color: #8da9b5;
  font-size: 14px;
}
.timing-board header i {
  height: 3px;
  position: relative;
  border-radius: 3px;
  background:
    linear-gradient(
      90deg,
      var(--accent),
      #c19df3);
  font-style: normal;
  text-align: center;
  line-height: 0;
}
.timing-row {
  height: 100px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 15px;
}
.timing-row > b {
  color: #b8ccd4;
  font-size: 14px;
}
.timing-row > div {
  height: 38px;
  position: relative;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}
.timing-row > div::before {
  content: "";
  position: absolute;
  left: calc(5% + var(--row)*20%);
  right: calc(39% - var(--row)*10%);
  inset-block: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--accent),
      #aa8ce6);
  animation: timingGlow 4.8s ease-in-out infinite;
}
.timing-row span {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 800;
}
.timing-row span:first-child {
  left: calc(8% + var(--row)*20%);
}
.timing-row span:last-child {
  right: 8%;
}
.timing-board p,
.cycle-board > p,
.feelings-board > p,
.cleavage-board > p,
.timeline-board > p,
.birth-board > p {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 4;
  transform: translateX(-50%);
  width: max-content;
  max-width: 86%;
  padding: 8px 12px;
  border-radius: 999px;
  color: #06202a;
  background: var(--accent);
  font-size: 13px;
  font-weight: 900;
}
@keyframes timingGlow {
  50% {
    filter: brightness(1.3);
    box-shadow: 0 0 22px rgba(var(--accent-rgb), .35);
  }
}
.hormone-board .signal-node {
  position: absolute;
  z-index: 4;
  width: 180px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 19px;
  background: rgba(5, 26, 38, .9);
  box-shadow: 0 18px 35px rgba(0, 0, 0, .25);
}
.signal-node span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #071b23;
  background: var(--accent);
  font-size: 14px;
  font-weight: 950;
}
.signal-node b,
.signal-node small {
  display: block;
}
.signal-node b {
  margin-top: 9px;
  font-size: 12px;
}
.signal-node small {
  margin-top: 4px;
  color: #91acb8;
  font-size: 13px;
}
.signal-node.brain {
  left: 5%;
  top: 11%;
}
.signal-node.pituitary {
  left: 39%;
  top: 35%;
}
.signal-node.ovaries {
  right: 5%;
  top: 10%;
}
.signal-node.testes {
  right: 5%;
  bottom: 11%;
}
.hormone-board > svg,
.sperm-board > svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-dasharray: 10 9;
  marker-end: url(#signalArrow);
  animation: dash 3s linear infinite;
}
.blood-vessel {
  position: absolute;
  left: 39%;
  bottom: 9%;
  width: 180px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #194f6b,
      #9a4356);
  overflow: hidden;
}
.blood-vessel i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffe891;
  animation: bloodFlow 2.8s linear infinite;
}
.blood-vessel i:nth-child(2) {
  animation-delay: .5s;
}
.blood-vessel i:nth-child(3) {
  animation-delay: 1s;
}
.blood-vessel i:nth-child(4) {
  animation-delay: 1.5s;
}
.blood-vessel i:nth-child(5) {
  animation-delay: 2s;
}
@keyframes bloodFlow {
  from {
    transform: translateX(-100px);
  }
  to {
    transform: translateX(100px);
  }
}
.receptor-key {
  position: absolute;
  left: 5%;
  bottom: 9%;
  z-index: 4;
  width: 260px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 14px;
  color: #a8c0c9;
  background: rgba(5, 25, 36, .8);
  font-size: 13px;
}
.receptor-key i {
  width: 18px;
  height: 18px;
  border: 4px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
}
.changes-board {
  padding: 32px;
  display: grid;
  grid-template-columns: 205px 1fr;
  gap: 18px;
  align-items: center;
}
.growth-figure {
  height: 430px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.figure-head {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #d9a98d;
}
.figure-body {
  width: 92px;
  height: 245px;
  margin-top: 8px;
  border-radius: 44% 44% 25% 25%;
  background:
    linear-gradient(
      145deg,
      var(--accent),
      #31677c);
  box-shadow: 0 25px 35px rgba(0, 0, 0, .25);
  animation: growthPulse 4.5s ease-in-out infinite;
}
.changes-female .figure-body {
  border-radius: 48% 48% 38% 38%;
}
.changes-male .figure-body {
  border-radius: 40% 40% 24% 24%;
}
.measure-line {
  position: absolute;
  right: 4px;
  top: 44px;
  bottom: 68px;
  width: 3px;
  background: repeating-linear-gradient(#91c9d9 0 3px, transparent 3px 12px);
}
.measure-line::before,
.measure-line::after {
  content: "";
  position: absolute;
  right: -6px;
  width: 15px;
  height: 3px;
  background: #91c9d9;
}
.measure-line::before {
  top: 0;
}
.measure-line::after {
  bottom: 0;
}
.growth-figure > b {
  margin-top: 13px;
  color: #afc7d0;
  font-size: 14px;
}
@keyframes growthPulse {
  50% {
    transform: scaleY(1.04);
    filter: brightness(1.08);
  }
}
.changes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.changes-grid > div {
  min-height: 150px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .035);
  text-align: center;
  animation: cardFocus 5s ease-in-out var(--delay) infinite;
}
.changes-grid strong {
  color: var(--accent);
  font-size: 30px;
}
.changes-grid b {
  margin-top: 8px;
  font-size: 14px;
}
.changes-grid span {
  margin-top: 5px;
  color: #91acb8;
  font-size: 13px;
}
@keyframes cardFocus {
  0%, 18% {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), .16);
  }
  28%, 100% {
    transform: none;
    border-color: rgba(255, 255, 255, .12);
    box-shadow: none;
  }
}
.variation-note {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  color: #8ea9b5;
  font-size: 13px;
  white-space: nowrap;
}
.feelings-board {
  overflow: visible;
}
.brain-map {
  position: absolute;
  left: 8%;
  top: 13%;
  width: 330px;
  height: 330px;
}
.brain-half {
  position: absolute;
  top: 30px;
  width: 164px;
  height: 245px;
  background:
    radial-gradient(
      circle at 50% 45%,
      #d894a8,
      #6c507a 70%);
  box-shadow: 0 25px 45px rgba(0, 0, 0, .3);
}
.brain-half.left {
  left: 5px;
  border-radius: 55% 42% 38% 58%;
  transform: rotate(-8deg);
}
.brain-half.right {
  right: 5px;
  border-radius: 42% 55% 58% 38%;
  transform: rotate(8deg);
}
.brain-map > i {
  --a:calc(var(--n)*30deg);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff1a4;
  box-shadow: 0 0 12px #ffdd7a;
  transform: rotate(var(--a)) translateX(110px);
  animation: synapse 3s ease-in-out calc(var(--n)*-.18s) infinite;
}
@keyframes synapse {
  50% {
    opacity: .25;
    transform: rotate(var(--a)) translateX(90px) scale(.6);
  }
}
.brain-map > b {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
}
.feeling-orbit > div {
  position: absolute;
  z-index: 4;
  width: 190px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 16px;
  background: rgba(5, 25, 37, .88);
}
.feeling-orbit > div:nth-child(1) {
  right: 6%;
  top: 9%;
}
.feeling-orbit > div:nth-child(2) {
  right: 4%;
  top: 37%;
}
.feeling-orbit > div:nth-child(3) {
  right: 7%;
  bottom: 19%;
}
.feeling-orbit > div:nth-child(4) {
  left: 38%;
  bottom: 8%;
}
.feeling-orbit b,
.feeling-orbit span {
  display: block;
}
.feeling-orbit b {
  color: var(--accent);
  font-size: 14px;
}
.feeling-orbit span {
  margin-top: 4px;
  color: #9eb7c1;
  font-size: 13px;
}
.hygiene-board > img {
  filter: saturate(.9) brightness(.86);
}
.hygiene-label {
  position: absolute;
  z-index: 4;
  width: 190px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  background: rgba(4, 19, 30, .84);
}
.hygiene-label b,
.hygiene-label span {
  display: block;
}
.hygiene-label b {
  font-size: 14px;
}
.hygiene-label span {
  margin-top: 4px;
  color: #9bb5c0;
  font-size: 12px;
  line-height: 1.45;
}
.hygiene-label.sweat {
  left: 3%;
  top: 18%;
}
.hygiene-label.sebum {
  right: 3%;
  top: 20%;
}
.hygiene-strip {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 4%;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.hygiene-strip span {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 13px;
  color: #dcebf0;
  background: rgba(4, 19, 29, .87);
  font-size: 13px;
  font-weight: 800;
}
.hygiene-strip i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #061a23;
  background: var(--accent);
  font-style: normal;
}
.cycle-board {
  padding: 26px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
}
.cycle-ring {
  width: 380px;
  height: 380px;
  margin-left: 20px;
  position: relative;
  border: 32px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08);
}
.cycle-ring::before {
  content: "";
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  background:
    conic-gradient(
      #ef7288 0 17%,
      #f2bf68 17% 48%,
      #78dcb4 48% 57%,
      #987ee0 57% 100%);
  mask: radial-gradient(transparent 55%, #000 56%);
}
.cycle-phase {
  position: absolute;
  z-index: 3;
  width: 112px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}
.cycle-phase i {
  width: 25px;
  height: 25px;
  margin: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #071a23;
  background: white;
  font-style: normal;
}
.cycle-phase span {
  margin-top: 4px;
  display: block;
}
.cycle-phase.p1 {
  left: -15px;
  top: 43%;
}
.cycle-phase.p2 {
  left: 34%;
  top: -15px;
}
.cycle-phase.p3 {
  right: -22px;
  top: 40%;
}
.cycle-phase.p4 {
  left: 29%;
  bottom: -20px;
}
.cycle-center {
  position: absolute;
  inset: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #174252,
      #071b27 72%);
  text-align: center;
}
.cycle-center b {
  font-size: 23px;
}
.cycle-center span {
  margin-top: 5px;
  color: #a2bbc5;
  font-size: 13px;
}
.cycle-pointer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 145px;
  transform-origin: 50% 0;
  background: linear-gradient(var(--accent), transparent);
  animation: cycleRotate 11s linear infinite;
}
@keyframes cycleRotate {
  to {
    transform: rotate(360deg);
  }
}
.uterus-mini {
  height: 330px;
  position: relative;
  border-radius: 28px;
  background: rgba(255, 255, 255, .035);
}
.mini-wall {
  position: absolute;
  left: 50%;
  top: 30px;
  width: 210px;
  height: 240px;
  transform: translateX(-50%);
  border: 30px solid #d86972;
  border-radius: 48% 48% 36% 36%;
}
.mini-lining {
  position: absolute;
  left: 50%;
  top: 63px;
  width: 135px;
  height: 165px;
  transform: translateX(-50%);
  border: 13px solid #ffb1ac;
  border-radius: 48% 48% 36% 36%;
  animation: liningCycle 11s ease-in-out infinite;
}
@keyframes liningCycle {
  0%, 15% {
    border-width: 3px;
    opacity: .5;
  }
  45%, 80% {
    border-width: 18px;
    opacity: 1;
  }
  100% {
    border-width: 3px;
    opacity: .5;
  }
}
.mini-egg {
  position: absolute;
  right: 33px;
  top: 75px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffe394;
  box-shadow: 0 0 15px #ffe394;
  animation: eggTravel 11s ease-in-out infinite;
}
@keyframes eggTravel {
  0%, 40% {
    transform: translate(0, 0);
    opacity: .3;
  }
  55% {
    transform: translate(-70px, 20px);
    opacity: 1;
  }
  85% {
    transform: translate(-110px, 95px);
    opacity: .4;
  }
  100% {
    opacity: 0;
  }
}
.uterus-mini > b {
  position: absolute;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  font-size: 13px;
  white-space: nowrap;
}
.sperm-board {
  padding: 30px;
}
.testis-cut {
  position: absolute;
  left: 6%;
  top: 16%;
  width: 220px;
  height: 320px;
}
.testis-body {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 140px;
  height: 220px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      ellipse at 40% 50%,
      #dfc0a3 0 7px,
      #a87864 8px 10px);
  box-shadow: 0 25px 40px rgba(0, 0, 0, .3);
}
.epididymis {
  position: absolute;
  left: 145px;
  top: 45px;
  width: 45px;
  height: 205px;
  border: 13px solid #d99472;
  border-left: 0;
  border-radius: 0 50% 50% 0;
}
.testis-cut b,
.testis-cut small {
  position: absolute;
  left: 25px;
  bottom: 38px;
  display: block;
}
.testis-cut small {
  bottom: 20px;
  color: #9db5bf;
  font-size: 13px;
}
.zoom-tube {
  position: absolute;
  left: 38%;
  top: 14%;
  width: 230px;
  height: 260px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 28px;
  background: rgba(255, 255, 255, .035);
}
.zoom-tube > div {
  height: 160px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  place-items: center;
}
.zoom-tube i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e4a482;
  animation: germPulse 3s ease-in-out calc(var(--n)*-.12s) infinite;
}
@keyframes germPulse {
  50% {
    transform: scale(.6);
    background: #ffe48e;
  }
}
.zoom-tube b,
.zoom-tube span {
  display: block;
  text-align: center;
}
.zoom-tube b {
  font-size: 14px;
}
.zoom-tube span {
  margin-top: 4px;
  color: #95afba;
  font-size: 13px;
}
.mature-sperm {
  position: absolute;
  right: 4%;
  top: 21%;
  width: 230px;
  height: 200px;
}
.mature-sperm > i {
  position: absolute;
  left: 30px;
  top: 55px;
  width: 58px;
  height: 76px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 40% 35%,
      #fff7bd,
      #b2dce6 60%,
      #5f91a0);
}
.mature-sperm > span {
  position: absolute;
  left: 78px;
  top: 92px;
  width: 125px;
  height: 60px;
  border-top: 6px solid #bfe8ef;
  border-radius: 50%;
  animation: tailWave 1.4s ease-in-out infinite alternate;
}
@keyframes tailWave {
  to {
    transform: skewY(14deg);
  }
}
.mature-sperm b,
.mature-sperm small {
  position: absolute;
  left: 25px;
  bottom: 8px;
}
.mature-sperm small {
  bottom: -11px;
  color: #93adb8;
  font-size: 13px;
}
.sperm-path {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 4;
  transform: translateX(-50%);
  padding: 9px 13px;
  border-radius: 999px;
  color: #06202a;
  background: var(--accent);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.anatomy-board > img {
  object-position: center;
}
.anatomy-label,
.prenatal-label {
  position: absolute;
  z-index: 5;
  min-width: 120px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 11px;
  color: white;
  background: rgba(3, 17, 27, .82);
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .24);
}
.anatomy-label i,
.prenatal-label i {
  position: absolute;
  top: 50%;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      white,
      transparent);
}
.female-anatomy .tube {
  left: 2%;
  top: 8%;
}
.female-anatomy .tube i {
  left: 100%;
  width: 180px;
  transform: rotate(12deg);
}
.female-anatomy .ovary {
  left: 2%;
  top: 35%;
}
.female-anatomy .ovary i {
  left: 100%;
  width: 175px;
  transform: rotate(-7deg);
}
.female-anatomy .uterus {
  right: 2%;
  top: 25%;
}
.female-anatomy .uterus i {
  right: 100%;
  width: 225px;
  transform: rotate(174deg);
}
.female-anatomy .cervix {
  right: 2%;
  bottom: 26%;
}
.female-anatomy .cervix i {
  right: 100%;
  width: 190px;
  transform: rotate(187deg);
}
.female-anatomy .vagina {
  right: 5%;
  bottom: 7%;
}
.female-anatomy .vagina i {
  right: 100%;
  width: 150px;
  transform: rotate(190deg);
}
.orientation-label {
  position: absolute;
  left: 2%;
  bottom: 5%;
  z-index: 5;
  padding: 8px 10px;
  border-radius: 11px;
  color: #7894a1;
  background: rgba(3, 17, 27, .72);
  font-size: 12px;
}
.orientation-label span {
  margin-right: 10px;
}
.orientation-label small {
  display: block;
  margin-top: 3px;
}
.male-anatomy > img {
  object-position: center;
}
.male-anatomy .anatomy-label {
  right: 3%;
}
.male-anatomy .anatomy-label i {
  right: 100%;
  transform: rotate(180deg);
}
.male-anatomy .bladder {
  top: 5%;
}
.male-anatomy .bladder i {
  width: 230px;
}
.male-anatomy .vesicle {
  top: 19%;
}
.male-anatomy .vesicle i {
  width: 310px;
}
.male-anatomy .prostate {
  top: 33%;
}
.male-anatomy .prostate i {
  width: 265px;
}
.male-anatomy .duct {
  top: 47%;
}
.male-anatomy .duct i {
  width: 325px;
}
.male-anatomy .urethra {
  top: 61%;
}
.male-anatomy .urethra i {
  width: 250px;
}
.male-anatomy .epididymis {
  bottom: 16%;
}
.male-anatomy .epididymis i {
  width: 335px;
}
.male-anatomy .testis {
  bottom: 3%;
}
.male-anatomy .testis i {
  width: 315px;
}
.gametes-board {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  padding: 50px;
}
.egg-model,
.sperm-model {
  height: 340px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.egg-shell {
  position: absolute;
  top: 10px;
  width: 245px;
  height: 245px;
  border: 16px solid rgba(249, 219, 152, .42);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 30%,
      #ffe6b1,
      #c56f68 58%,
      #733e5b);
}
.egg-core {
  position: absolute;
  top: 84px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #fff2a8,
      #d4867a);
  box-shadow: 0 0 24px #ffcb84;
}
.egg-model b,
.sperm-model b {
  font-size: 13px;
}
.egg-model small,
.sperm-model small {
  margin-top: 6px;
  color: #93adb8;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.plus {
  color: var(--accent);
  font-size: 36px;
  font-weight: 300;
  text-align: center;
}
.sperm-model > i {
  position: absolute;
  top: 60px;
  width: 70px;
  height: 90px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 40% 35%,
      #fff8ba,
      #a9d2dd 60%,
      #4f8192);
}
.sperm-model > span {
  position: absolute;
  top: 143px;
  width: 180px;
  height: 120px;
  border-top: 7px solid #a9dce4;
  border-radius: 50%;
  animation: tailWave 1.4s ease-in-out infinite alternate;
}
.chromosome-card {
  position: absolute;
  left: 50%;
  top: 18px;
  z-index: 4;
  transform: translateX(-50%);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 14px;
  background: rgba(3, 17, 27, .8);
}
.chromosome-card span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #06202a;
  background: var(--accent);
  font-weight: 950;
}
.chromosome-card b {
  font-size: 13px;
}
.chromosome-card small {
  color: #8ea8b3;
  font-size: 12px;
}
.gametes-board > p {
  position: absolute;
  right: 16px;
  bottom: 10px;
  color: #708e9b;
  font-size: 12px;
}
.conception-board > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.uterus-shape {
  fill: rgba(203, 92, 107, .22);
  stroke: #d36d79;
  stroke-width: 24;
}
.tube-shape {
  fill: none;
  stroke: #d88988;
  stroke-width: 22;
  stroke-linecap: round;
}
.egg-route {
  fill: #ffe29a;
  stroke: #fff2bf;
  stroke-width: 4;
  filter: drop-shadow(0 0 12px #ffd77a);
}
.sperm-route {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-dasharray: 12 10;
  marker-end: url(#routeArrow);
  animation: dash 2.6s linear infinite;
}
.route-sperm {
  transform-origin: 450px 490px;
  animation: spermClimb 5.5s ease-in-out calc(var(--n)*-.33s) infinite;
}
.route-sperm circle {
  fill: #d9fbff;
}
.route-sperm path {
  fill: none;
  stroke: #d9fbff;
  stroke-width: 2;
}
@keyframes spermClimb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  75% {
    transform: translate(calc((var(--n) - 4)*12px), -250px);
  }
  100% {
    transform: translate(-280px, -270px);
    opacity: 0;
  }
}
.route-label {
  position: absolute;
  z-index: 4;
  padding: 7px 9px;
  border-radius: 10px;
  color: #dff3f6;
  background: rgba(3, 17, 27, .82);
  font-size: 13px;
  font-weight: 850;
}
.route-label.vagina {
  left: 46%;
  bottom: 4%;
}
.route-label.uterus {
  left: 47%;
  top: 47%;
}
.route-label.tube {
  right: 10%;
  top: 32%;
}
.route-label.egg {
  left: 10%;
  top: 36%;
}
.route-note {
  position: absolute;
  right: 3%;
  bottom: 5%;
  z-index: 4;
  padding: 8px 10px;
  border-left: 2px solid var(--accent);
  color: #a8c0ca;
  background: rgba(3, 17, 27, .7);
  font-size: 13px;
}
.fertilization-board {
  background:
    radial-gradient(
      circle at 50% 47%,
      rgba(255, 199, 118, .22),
      transparent 36%),
    linear-gradient(
      145deg,
      #0b2d3c,
      #081823);
}
.fert-egg {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 330px;
  height: 330px;
  transform: translate(-50%, -50%);
  border: 25px solid rgba(255, 222, 164, .35);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 40% 35%,
      #f3b98f,
      #b9646d 60%,
      #6a405a);
}
.fert-shell {
  position: absolute;
  inset: -11px;
  border: 7px solid #ffe2a4;
  border-radius: 50%;
  animation: shellLock 6s ease-in-out infinite;
}
@keyframes shellLock {
  0%, 35% {
    filter: none;
  }
  52%, 100% {
    filter: drop-shadow(0 0 14px #ffe17c);
    border-width: 13px;
  }
}
.fert-nucleus {
  position: absolute;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2b1b2b;
  font-size: 14px;
  font-weight: 950;
}
.fert-nucleus.maternal {
  left: 75px;
  top: 105px;
  background: #f4c0d7;
}
.fert-nucleus.paternal {
  right: 50px;
  top: 105px;
  background: #abdff0;
  animation: nucleusMerge 6s ease-in-out infinite;
}
@keyframes nucleusMerge {
  0%, 40% {
    transform: translate(0, 0);
  }
  75%, 100% {
    transform: translate(-74px, 0);
  }
}
.fert-sperm {
  position: absolute;
  left: 10%;
  top: 42%;
  width: 260px;
  height: 90px;
  animation: spermEnter 6s ease-in-out infinite;
}
.fert-sperm i {
  position: absolute;
  right: 25px;
  width: 55px;
  height: 70px;
  border-radius: 50%;
  background: #d8f4f5;
}
.fert-sperm span {
  position: absolute;
  right: 72px;
  top: 34px;
  width: 150px;
  height: 50px;
  border-top: 5px solid #bcebf0;
  border-radius: 50%;
}
@keyframes spermEnter {
  0%, 15% {
    transform: translateX(-30px);
    opacity: 0;
  }
  40% {
    transform: translateX(70px);
    opacity: 1;
  }
  55%, 100% {
    transform: translateX(95px);
    opacity: 0;
  }
}
.fert-stages {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
}
.fert-stages span {
  padding: 8px 10px;
  border-radius: 11px;
  color: #c9dbe1;
  background: rgba(3, 17, 27, .8);
  font-size: 13px;
  font-weight: 800;
}
.fert-stages b {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  color: #061b24;
  background: var(--accent);
}
.fert-note {
  position: absolute;
  right: 3%;
  top: 5%;
  z-index: 4;
  width: 200px;
  padding: 9px 11px;
  border-left: 2px solid #ffe18b;
  color: #a7c0ca;
  background: rgba(3, 17, 27, .72);
  font-size: 13px;
}
.cleavage-track {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 18%;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 8px;
}
.cleavage-stage {
  min-width: 0;
  text-align: center;
}
.cleavage-stage > div {
  width: 125px;
  height: 125px;
  margin: auto;
  padding: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  border: 8px solid rgba(255, 224, 167, .35);
  border-radius: 50%;
  background: rgba(183, 95, 101, .55);
  animation: cleavageFocus 6s ease-in-out var(--delay) infinite;
}
.cleavage-stage i {
  width: calc(70px / max(2, var(--count)));
  height: calc(70px / max(2, var(--count)));
  min-width: 15px;
  min-height: 15px;
  margin: 2px;
  border-radius: 50%;
  background: #ffd9a3;
  box-shadow: inset 0 0 0 2px rgba(119, 59, 73, .3);
}
.cleavage-stage b {
  margin-top: 8px;
  display: block;
  font-size: 13px;
}
.cleavage-stage > span {
  position: absolute;
  margin: -80px 0 0 72px;
  color: var(--accent);
  font-size: 21px;
}
@keyframes cleavageFocus {
  0%, 15% {
    transform: scale(1.08);
    filter: brightness(1.25);
  }
  25%, 100% {
    transform: none;
    filter: none;
  }
}
.cleavage-board > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tube-flow {
  fill: none;
  stroke: #aa6e76;
  stroke-width: 38;
  stroke-linecap: round;
  opacity: .28;
}
.cleavage-board > p {
  bottom: 30px;
}
.implantation-board {
  background:
    linear-gradient(
      180deg,
      #0b2838 0 43%,
      #782f45 44% 54%,
      #a94f61 55% 100%);
}
.lining {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 30px;
  background:
    repeating-linear-gradient(
      100deg,
      rgba(255, 174, 167, .45) 0 15px,
      rgba(117, 43, 70, .25) 15px 28px);
}
.lining > span {
  width: 13px;
  height: 115px;
  border-radius: 10px;
  background: #f6a19e;
  box-shadow: 0 0 15px rgba(255, 184, 171, .2);
}
.lining > b {
  position: absolute;
  right: 20px;
  bottom: 18px;
  font-size: 13px;
}
.blastocyst {
  position: absolute;
  left: 42%;
  top: 8%;
  width: 210px;
  height: 210px;
  border: 15px solid rgba(255, 229, 169, .56);
  border-radius: 50%;
  background: rgba(197, 97, 106, .8);
  animation: implant 7s ease-in-out infinite;
}
.blastocyst i {
  --a:calc(var(--n)*20deg);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffd9a4;
  transform: rotate(var(--a)) translateX(70px);
}
.blastocyst b {
  position: absolute;
  left: 50%;
  bottom: -31px;
  transform: translateX(-50%);
  font-size: 13px;
}
@keyframes implant {
  0%, 20% {
    transform: translateY(-30px);
  }
  60%, 100% {
    transform: translateY(120px);
    box-shadow: 0 0 35px #ffc29b;
  }
}
.implant-arrow {
  position: absolute;
  left: 25%;
  top: 20%;
  color: var(--accent);
  font-size: 40px;
  text-align: center;
  animation: downArrow 2s ease-in-out infinite;
}
.implant-arrow span {
  display: block;
  font-size: 13px;
}
@keyframes downArrow {
  50% {
    transform: translateY(10px);
  }
}
.implant-key {
  position: absolute;
  right: 3%;
  top: 5%;
  z-index: 4;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(3, 17, 27, .76);
}
.implant-key span {
  display: block;
  color: #bed0d7;
  font-size: 13px;
}
.implant-key span + span {
  margin-top: 6px;
}
.implant-key i,
.implant-key b {
  width: 10px;
  height: 10px;
  margin-right: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #ffd8a4;
}
.implant-key b {
  background: #b7dcf0;
}
.embryo-board {
  padding: 35px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: center;
}
.embryo-stage {
  height: 390px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 25px;
  background: rgba(255, 255, 255, .035);
  animation: stageFocus 7.5s ease-in-out infinite;
}
.embryo-stage.e2 {
  animation-delay: 2.5s;
}
.embryo-stage.e3 {
  animation-delay: 5s;
}
@keyframes stageFocus {
  0%, 22% {
    border-color: var(--accent);
    transform: translateY(-7px);
    box-shadow: 0 0 25px rgba(var(--accent-rgb), .15);
  }
  32%, 100% {
    transform: none;
    border-color: rgba(255, 255, 255, .12);
  }
}
.embryo-stage > div {
  width: 170px;
  height: 240px;
  position: relative;
  transform: rotate(-18deg);
}
.embryo-head {
  position: absolute;
  left: 40px;
  top: 15px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: #e99d85;
}
.embryo-trunk {
  position: absolute;
  left: 43px;
  top: 95px;
  width: 105px;
  height: 135px;
  border-radius: 40% 55% 55% 35%;
  background: linear-gradient(#e99d85, #c56f74);
}
.bud {
  position: absolute;
  width: 55px;
  height: 25px;
  border-radius: 50%;
  background: #e99d85;
}
.bud.arm {
  left: 5px;
  top: 120px;
}
.bud.leg {
  right: 0;
  top: 185px;
}
.e1 .bud {
  display: none;
}
.e1 .embryo-head {
  width: 78px;
  height: 78px;
}
.e1 .embryo-trunk {
  width: 78px;
  height: 110px;
  top: 70px;
}
.e2 .bud {
  transform: scale(.65);
}
.embryo-stage b {
  font-size: 12px;
}
.embryo-stage small {
  margin-top: 5px;
  color: #93acb7;
  font-size: 13px;
}
.embryo-banner {
  position: absolute;
  left: 50%;
  bottom: 13px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  color: #071b23;
  background: var(--accent);
  font-size: 13px;
  font-weight: 900;
}
.timeline-board {
  padding: 42px 32px;
}
.month-track {
  height: 390px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  align-items: end;
}
.month-track > div {
  min-height: 300px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 22px;
  background: linear-gradient(rgba(var(--accent-rgb), .07), rgba(255, 255, 255, .025));
  animation: monthFocus 8s ease-in-out calc(var(--n)*1.5s) infinite;
}
.fetus-icon {
  width: calc(65px + var(--n)*15px);
  height: calc(75px + var(--n)*32px);
  position: relative;
  display: block;
  border-radius: 50% 45% 45% 55%;
  background:
    linear-gradient(
      145deg,
      #e9a086,
      #b45e6d);
  transform: rotate(-20deg);
}
.fetus-icon i {
  position: absolute;
  left: 12%;
  top: 5%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #eda88c;
}
.fetus-icon b {
  position: absolute;
  right: 4%;
  bottom: 16%;
  width: 55%;
  height: 18%;
  border-radius: 50%;
  background: #e29583;
}
.month-track strong {
  margin-top: 16px;
  font-size: 14px;
}
.month-track small {
  margin-top: 5px;
  color: #95aeb9;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
@keyframes monthFocus {
  0%, 15% {
    border-color: var(--accent);
    filter: brightness(1.18);
    transform: translateY(-6px);
  }
  24%, 100% {
    transform: none;
    filter: none;
  }
}
.growth-bar {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 65px;
  height: 6px;
  border-radius: 6px;
  background:
    linear-gradient(
      90deg,
      #6bbdd2,
      var(--accent),
      #ffd18a);
}
.growth-bar i {
  position: absolute;
  left: 0;
  top: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  animation: growthTravel 8s ease-in-out infinite;
}
@keyframes growthTravel {
  to {
    left: calc(100% - 16px);
  }
}
.growth-bar span {
  position: absolute;
  left: 50%;
  top: 11px;
  transform: translateX(-50%);
  color: #87a3af;
  font-size: 12px;
}
.prenatal-board > img {
  object-position: center;
}
.prenatal-board > svg {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 22 14;
}
.oxygen-flow {
  stroke: #74dff0;
  animation: dash 2.8s linear infinite;
}
.waste-flow {
  stroke: #ff978b;
  animation: dash 2.8s linear infinite reverse;
}
.prenatal-label.fetus {
  left: 2%;
  top: 19%;
}
.prenatal-label.fetus i {
  left: 100%;
  width: 280px;
}
.prenatal-label.fluid {
  left: 2%;
  top: 41%;
}
.prenatal-label.fluid i {
  left: 100%;
  width: 255px;
  transform: rotate(8deg);
}
.prenatal-label.cord {
  left: 2%;
  bottom: 19%;
}
.prenatal-label.cord i {
  left: 100%;
  width: 320px;
  transform: rotate(-15deg);
}
.prenatal-label.placenta {
  right: 2%;
  top: 14%;
}
.prenatal-label.placenta i {
  right: 100%;
  width: 170px;
  transform: rotate(180deg);
}
.prenatal-label.cervix {
  right: 2%;
  bottom: 7%;
}
.prenatal-label.cervix i {
  right: 100%;
  width: 250px;
  transform: rotate(187deg);
}
.exchange-key {
  position: absolute;
  right: 2%;
  bottom: 31%;
  z-index: 5;
  padding: 9px 11px;
  border-radius: 12px;
  color: #b9ced6;
  background: rgba(3, 17, 27, .84);
  font-size: 12px;
}
.exchange-key span,
.exchange-key small {
  display: block;
}
.exchange-key span + span {
  margin-top: 5px;
}
.exchange-key i,
.exchange-key b {
  width: 18px;
  height: 4px;
  margin-right: 6px;
  display: inline-block;
  border-radius: 4px;
  background: #74dff0;
}
.exchange-key b {
  background: #ff978b;
}
.exchange-key small {
  margin-top: 6px;
  color: #7894a0;
}
.protection-board {
  padding: 35px;
}
.placenta-filter {
  height: 165px;
  display: grid;
  grid-template-columns: 1fr 65px 160px 65px 1fr;
  align-items: center;
  text-align: center;
  color: #9eb7c1;
  font-size: 13px;
}
.placenta-filter > i {
  height: 5px;
  background:
    linear-gradient(
      90deg,
      #64cbe1,
      #ffd78a);
  animation: filterFlow 2.6s linear infinite;
}
.placenta-filter > b {
  height: 130px;
  display: grid;
  place-items: center;
  border: 20px solid #b84f61;
  border-radius: 50%;
  background:
    repeating-linear-gradient(
      90deg,
      #9c4057 0 6px,
      #d66d74 6px 12px);
  font-size: 12px;
}
@keyframes filterFlow {
  50% {
    filter: brightness(1.5);
    box-shadow: 0 0 16px var(--accent);
  }
}
.protection-list {
  position: absolute;
  top: 210px;
  bottom: 85px;
  width: 40%;
  display: grid;
  gap: 8px;
}
.protection-list.good {
  left: 5%;
}
.protection-list.risk {
  right: 5%;
}
.protection-list span {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  font-size: 13px;
}
.protection-list b {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #061a23;
  background: #70dda0;
}
.protection-list.risk b {
  background: #ff8b7e;
}
.filter-note {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 9px 13px;
  border-radius: 999px;
  color: #071a23;
  background: var(--accent);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.birth-board {
  padding: 42px 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  align-items: center;
}
.birth-stage {
  height: 390px;
  position: relative;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: rgba(255, 255, 255, .035);
  text-align: center;
  animation: birthFocus 6s ease-in-out var(--delay) infinite;
}
.birth-stage > strong {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #071a23;
  background: var(--accent);
  font-size: 14px;
}
.birth-stage h3 {
  margin: 8px 0 0;
  font-size: 14px;
}
.birth-stage small {
  margin-top: 4px;
  color: #91abb6;
  font-size: 12px;
}
.birth-stage em {
  position: absolute;
  right: -22px;
  top: 44%;
  z-index: 3;
  color: var(--accent);
  font-size: 25px;
  font-style: normal;
}
.birth-uterus {
  position: absolute;
  top: 18px;
  width: 165px;
  height: 230px;
  border: 20px solid #bd5e69;
  border-radius: 48% 48% 37% 37%;
  background: rgba(219, 121, 118, .3);
}
.birth-fetus {
  position: absolute;
  left: 36px;
  top: 42px;
  width: 80px;
  height: 120px;
  border-radius: 50% 46% 42% 55%;
  background: #e8a085;
  transform: rotate(18deg);
}
.birth-cervix {
  position: absolute;
  left: 50%;
  bottom: -25px;
  width: 56px;
  height: 65px;
  transform: translateX(-50%);
  border: 15px solid #bd5e69;
  border-top: 0;
}
.b2 .birth-fetus {
  animation: birthMove 6s ease-in-out 1.8s infinite;
}
.b3 .birth-fetus {
  opacity: .15;
}
.b3 .birth-uterus::after {
  content: "Plazenta";
  position: absolute;
  right: 3px;
  top: 48px;
  width: 55px;
  height: 85px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffe0d3;
  background: #8e4058;
  font-size: 12px;
}
@keyframes birthMove {
  0%, 20% {
    transform: translateY(0) rotate(18deg);
  }
  62%, 100% {
    transform: translateY(105px) rotate(5deg);
  }
}
@keyframes birthFocus {
  0%, 20% {
    border-color: var(--accent);
    transform: translateY(-6px);
  }
  30%, 100% {
    border-color: rgba(255, 255, 255, .12);
    transform: none;
  }
}
.birth-board > p {
  bottom: 15px;
}
.condom-board {
  padding: 34px;
}
.condom-model {
  position: absolute;
  left: 7%;
  top: 8%;
  width: 260px;
  height: 430px;
}
.condom-shell {
  position: absolute;
  left: 68px;
  top: 40px;
  width: 125px;
  height: 315px;
  border: 11px solid rgba(184, 236, 239, .82);
  border-top-width: 17px;
  border-radius: 55px 55px 30px 30px;
  background:
    linear-gradient(
      90deg,
      rgba(194, 242, 242, .06),
      rgba(194, 242, 242, .22),
      rgba(194, 242, 242, .06));
}
.condom-reservoir {
  position: absolute;
  left: 105px;
  top: 10px;
  width: 50px;
  height: 58px;
  border: 10px solid rgba(184, 236, 239, .82);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}
.condom-model > i {
  --a:calc(var(--n)*40deg);
  position: absolute;
  left: 130px;
  top: 270px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f6e2a5;
  transform: rotate(var(--a)) translateX(38px);
  animation: condomContain 3s ease-in-out calc(var(--n)*-.16s) infinite;
}
@keyframes condomContain {
  50% {
    transform: rotate(var(--a)) translateX(25px);
  }
}
.condom-model > b {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 850;
}
.barrier-wall {
  position: absolute;
  left: 40%;
  top: 15%;
  bottom: 15%;
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 5px solid var(--accent);
  border-right: 5px solid var(--accent);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(var(--accent-rgb), .16) 0 9px,
      transparent 9px 18px);
}
.barrier-wall span {
  transform: rotate(-90deg);
  font-size: 15px;
  font-weight: 800;
}
.barrier-wall i {
  margin-top: 55px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #061a23;
  background: var(--accent);
  font-size: 15px;
  font-style: normal;
  font-weight: 950;
}
.condom-benefits {
  position: absolute;
  right: 4%;
  top: 12%;
  bottom: 18%;
  width: 46%;
  display: grid;
  gap: 12px;
}
.condom-benefits span {
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 17px;
  color: #d5e6eb;
  background: rgba(255, 255, 255, .035);
  font-size: 18px;
  line-height: 1.32;
  font-weight: 800;
  animation: cardFocus 5s ease-in-out infinite;
}
.condom-benefits span:nth-child(2) {
  animation-delay: 1.6s;
}
.condom-benefits span:nth-child(3) {
  animation-delay: 3.2s;
}
.condom-benefits b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #061a23;
  background: var(--accent);
  font-size: 16px;
}
.single-use {
  position: absolute;
  right: 6%;
  bottom: 5%;
  color: #a0b6bf;
  font-size: 14px;
}
.pill-board {
  padding: 32px;
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 25px;
  align-items: center;
}
.pill-pack {
  height: 420px;
  padding: 30px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      #e6dff1,
      #9986b6);
  box-shadow: 0 25px 45px rgba(0, 0, 0, .32);
}
.pill-pack i {
  display: grid;
  place-items: center;
  border: 5px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  color: #5b4e70;
  background:
    radial-gradient(
      circle,
      #fff,
      #cbbce2);
  font-size: 15px;
  font-style: normal;
  box-shadow: inset 0 0 0 1px rgba(66, 42, 84, .28);
}
.pill-pack b {
  position: absolute;
  left: 18px;
  top: 10px;
  color: #4b3e62;
  font-size: 17px;
  font-weight: 850;
}
.pill-pack span {
  position: absolute;
  right: 18px;
  bottom: 12px;
  color: #4b3e62;
  font-size: 15px;
  font-weight: 800;
}
.pill-effects {
  display: grid;
  gap: 12px;
}
.pill-effects > div {
  min-height: 112px;
  padding: 16px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 17px;
  background: rgba(255, 255, 255, .035);
  animation: cardFocus 6s ease-in-out infinite;
}
.pill-effects > div:nth-child(2) {
  animation-delay: 2s;
}
.pill-effects > div:nth-child(3) {
  animation-delay: 4s;
}
.pill-effects i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #061a23;
  background: var(--accent);
  font-size: 15px;
  font-style: normal;
  font-weight: 950;
}
.pill-effects b {
  font-size: 17px;
}
.pill-effects span {
  grid-column: 2;
  margin-top: -16px;
  color: #b2c5cd;
  font-size: 15px;
  line-height: 1.3;
}
.pill-warning {
  position: absolute;
  left: 34%;
  right: 3%;
  bottom: 14px;
  display: flex;
  gap: 7px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.pill-warning span,
.pill-warning strong {
  padding: 7px 10px;
  border-radius: 999px;
  color: #c5d7dd;
  background: rgba(3, 17, 27, .8);
  font-size: 14px;
}
.pill-warning strong {
  color: #2e1515;
  background: #ff9b8d;
}
@media (max-width: 1050px) {
  .slide {
    grid-template-columns: 1fr;
    align-items: start;
    overflow: auto;
  }
  .content-column {
    max-width: 920px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }
  .content-column h1 {
    grid-column: 1/-1;
  }
  .eyebrow {
    grid-column: 1/-1;
  }
  .memory-card {
    grid-column: 1;
  }
  .fact-row {
    grid-column: 2;
  }
  .visual-board,
  .image-board {
    max-width: 790px;
  }
  .slide {
    padding-top: 28px;
  }
  .controls {
    bottom: 10px;
  }
}
@media (max-width: 700px) {
  .topbar {
    grid-template-columns: 1fr auto;
    height: 64px;
    padding: 0 12px;
  }
  .path-title {
    display: none;
  }
  .brand strong {
    font-size: 14px;
  }
  .page-count span {
    font-size: 18px;
  }
  .slide {
    padding: 20px 10px 100px;
    gap: 18px;
  }
  .content-column {
    display: block;
  }
  .content-column h1 {
    font-size: 31px;
  }
  .memory-card {
    margin-top: 15px;
  }
  .fact-row {
    margin-top: 12px;
  }
  .visual-board,
  .image-board {
    aspect-ratio: 1.5;
    border-radius: 22px;
  }
  .controls {
    height: 59px;
    width: calc(100% - 12px);
    padding: 5px;
  }
  .icon-button {
    width: 42px;
    height: 42px;
  }
  .text-control,
  .voice-control {
    display: none;
  }
  .speed-control {
    height: 42px;
    width: 45px;
  }
  .secondary-controls {
    gap: 1px;
  }
  .start-screen {
    padding: 24px;
  }
  .start-card h2 {
    font-size: 42px;
  }
  .start-note {
    font-size: 14px;
  }
  .timing-board,
  .changes-board,
  .embryo-board,
  .timeline-board,
  .birth-board,
  .protection-board,
  .condom-board,
  .pill-board {
    padding: 12px;
  }
  .changes-board {
    grid-template-columns: 95px 1fr;
  }
  .growth-figure {
    height: 240px;
  }
  .figure-head {
    width: 35px;
    height: 35px;
  }
  .figure-body {
    width: 50px;
    height: 135px;
  }
  .changes-grid {
    gap: 4px;
  }
  .changes-grid > div {
    min-height: 80px;
    padding: 6px;
  }
  .changes-grid strong {
    font-size: 18px;
  }
  .changes-grid b {
    font-size: 13px;
  }
  .changes-grid span {
    font-size: 12px;
  }
  .cycle-ring {
    width: 210px;
    height: 210px;
    border-width: 18px;
  }
  .cycle-ring::before {
    inset: -18px;
  }
  .cycle-center {
    inset: 42px;
  }
  .cycle-phase {
    width: 70px;
    font-size: 12px;
  }
  .cycle-phase i {
    width: 17px;
    height: 17px;
  }
  .cycle-pointer {
    height: 78px;
  }
  .uterus-mini {
    height: 190px;
  }
  .mini-wall {
    width: 120px;
    height: 135px;
    border-width: 17px;
  }
  .mini-lining {
    width: 75px;
    height: 90px;
    top: 51px;
  }
  .anatomy-label,
  .prenatal-label {
    min-width: 74px;
    padding: 4px 5px;
    font-size: 12px;
  }
  .male-anatomy .anatomy-label i {
    max-width: 155px;
  }
  .female-anatomy .anatomy-label i,
  .prenatal-label i {
    max-width: 130px;
  }
  .hormone-board .signal-node {
    width: 112px;
    padding: 8px;
  }
  .signal-node b {
    font-size: 13px;
  }
  .signal-node small {
    font-size: 12px;
  }
  .receptor-key {
    display: none;
  }
  .birth-stage {
    height: 210px;
    padding: 6px;
  }
  .birth-uterus {
    width: 85px;
    height: 120px;
    border-width: 10px;
  }
  .birth-fetus {
    left: 18px;
    top: 22px;
    width: 42px;
    height: 65px;
  }
  .birth-stage h3 {
    font-size: 12px;
  }
  .birth-stage small {
    font-size: 12px;
  }
  .pill-board {
    grid-template-columns: 150px 1fr;
  }
  .pill-pack {
    height: 220px;
    padding: 18px 12px;
    gap: 4px;
  }
  .pill-effects > div {
    min-height: 55px;
    padding: 6px;
  }
  .pill-warning {
    display: none;
  }
  .month-track {
    height: 210px;
  }
  .month-track > div {
    min-height: 160px;
    padding: 5px;
  }
  .fetus-icon {
    transform: scale(.6) rotate(-20deg);
  }
  .month-track strong {
    font-size: 12px;
  }
  .month-track small {
    font-size: 12px;
  }
  .hero-cell {
    display: none;
  }
  .hero-person span {
    transform: scale(.65);
  }
  .hero-person.child {
    left: 5%;
  }
  .hero-person.teen {
    left: 35%;
  }
  .hero-person.adult {
    right: 8%;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
.cleavage-stage i {
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
}
.content-column h1 {
  font-size: clamp(32px, 3.2vw, 50px);
  hyphens: auto;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .content-column h1 {
    font-size: 31px;
  }
}
.male-anatomy .epididymis-label {
  bottom: 16%;
}
.male-anatomy .epididymis-label i {
  width: 335px;
}
.cleavage-stage.cells-12 i {
  width: 18px;
  height: 18px;
  margin: 1px;
}
.blastocyst-stage > div {
  position: relative;
}
.blastocyst-stage i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px;
  transform: rotate(calc(var(--cell)*22.5deg)) translateX(41px);
}
.blastocyst-stage > div::after {
  content: "";
  position: absolute;
  left: 35px;
  bottom: 25px;
  width: 39px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 25% 35%,
      #fff1c4 0 5px,
      #f6bd8d 6px 11px,
      #d9877f 12px);
  box-shadow: 0 0 10px rgba(255, 224, 167, .55);
}
.prenatal-label.cord {
  bottom: 26%;
}
.prenatal-label.cord i {
  transform-origin: left center;
  transform: rotate(-27deg);
}
.embryo-detail-board > img,
.fetal-growth-detail-board > img,
.birth-detail-board > img {
  object-position: center center;
  filter: saturate(.96) contrast(1.03);
}
.embryo-detail-board::before,
.fetal-growth-detail-board::before,
.birth-detail-board::before,
.placenta-detail-board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 48%,
      rgba(2, 14, 22, .08) 60%,
      rgba(2, 14, 22, .9) 100%);
}
.detail-stage-grid {
  position: absolute;
  left: 2.5%;
  right: 2.5%;
  bottom: 54px;
  z-index: 6;
  display: grid;
  gap: 12px;
}
.detail-stage-grid.three {
  grid-template-columns: repeat(3, 1fr);
}
.detail-stage-grid.five {
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.detail-stage-label {
  min-height: 70px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, .25);
  border-radius: 15px;
  background: rgba(3, 20, 30, .86);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
  animation: detailStageFocus 7s ease-in-out var(--delay) infinite;
}
.detail-stage-label strong {
  display: flex;
  align-items: center;
  gap: 9px;
  color: white;
  font-size: 16px;
}
.detail-stage-label strong i {
  width: 27px;
  height: 27px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: #08202a;
  background: var(--accent);
  font-size: 15px;
  font-style: normal;
}
.detail-stage-label span {
  margin-top: 5px;
  color: #bfd1d8;
  font-size: 13px;
  line-height: 1.28;
}
@keyframes detailStageFocus {
  0%, 18% {
    border-color: var(--accent);
    transform: translateY(-7px);
    box-shadow: 0 0 30px rgba(var(--accent-rgb), .35);
  }
  28%, 100% {
    transform: none;
    border-color: rgba(255, 255, 255, .25);
  }
}
.detail-note {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 7;
  transform: translateX(-50%);
  width: max-content;
  max-width: 92%;
  padding: 8px 15px;
  border-radius: 999px;
  color: #dceaf0;
  background: rgba(3, 18, 27, .92);
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
}
.detail-note b {
  color: var(--accent);
}
.growth-direction {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 8%;
  z-index: 4;
  height: 5px;
  border-radius: 5px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .1),
      var(--accent));
  opacity: .75;
}
.growth-direction i {
  position: absolute;
  top: -6px;
  width: 17px;
  height: 17px;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--accent);
  animation: growthDetailTravel 7s ease-in-out infinite;
}
@keyframes growthDetailTravel {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 17px);
  }
}
.fetal-growth-detail-board .detail-stage-label {
  min-height: 76px;
  padding-inline: 10px;
}
.fetal-growth-detail-board .detail-stage-label strong {
  font-size: 15px;
}
.fetal-growth-detail-board .detail-stage-label span {
  font-size: 12px;
}
.birth-detail-board .detail-stage-label {
  min-height: 78px;
}
.birth-progress {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 7%;
  z-index: 5;
  height: 4px;
  display: flex;
  justify-content: space-between;
  background:
    linear-gradient(
      90deg,
      var(--accent),
      #ffd991);
}
.birth-progress i {
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 4px solid white;
  border-radius: 50%;
  background: var(--accent);
  animation: birthDetailPulse 6.3s ease-in-out infinite;
}
.birth-progress i:nth-child(2) {
  animation-delay: 2.1s;
}
.birth-progress i:nth-child(3) {
  animation-delay: 4.2s;
}
@keyframes birthDetailPulse {
  0%, 25% {
    transform: scale(1.45);
    box-shadow: 0 0 20px var(--accent);
  }
  35%, 100% {
    transform: none;
    box-shadow: none;
  }
}
.placenta-detail-board > img {
  filter: saturate(.92) brightness(.78) contrast(1.06);
}
.placenta-callout {
  position: absolute;
  z-index: 6;
  min-width: 175px;
  padding: 10px 12px;
  border: 2px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  background: rgba(3, 18, 27, .9);
  backdrop-filter: blur(10px);
}
.placenta-callout strong,
.placenta-callout span {
  display: block;
}
.placenta-callout strong {
  color: white;
  font-size: 15px;
}
.placenta-callout span {
  margin-top: 4px;
  color: #bdd0d8;
  font-size: 13px;
}
.placenta-callout.maternal {
  left: 2%;
  top: 3%;
}
.placenta-callout.villi {
  left: 38%;
  top: 3%;
}
.placenta-callout.fetal {
  right: 2%;
  top: 3%;
}
.placenta-callout.cord {
  right: 2%;
  bottom: 27%;
}
.exchange-flow {
  position: absolute;
  z-index: 6;
  bottom: 17%;
  padding: 10px 13px;
  border-radius: 13px;
  color: white;
  background: rgba(3, 18, 27, .92);
  font-size: 14px;
  font-weight: 850;
  animation: exchangeDetailGlow 3.2s ease-in-out infinite;
}
.exchange-flow b {
  margin-left: 6px;
  color: var(--accent);
}
.exchange-flow.oxygen {
  left: 2%;
  border-left: 5px solid #75e4f2;
}
.exchange-flow.waste {
  left: 35%;
  border-left: 5px solid #ff9a8f;
  animation-delay: 1.6s;
}
@keyframes exchangeDetailGlow {
  50% {
    transform: translateY(-5px);
    box-shadow: 0 0 22px rgba(var(--accent-rgb), .35);
  }
}
.separate-blood {
  position: absolute;
  left: 2%;
  bottom: 3%;
  z-index: 6;
  width: 39%;
  padding: 9px 12px;
  border-radius: 12px;
  color: #e7f3f5;
  background: rgba(3, 18, 27, .93);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 850;
}
.barrier-warning {
  position: absolute;
  right: 2%;
  bottom: 3%;
  z-index: 6;
  width: 54%;
  padding: 9px 12px;
  border-radius: 12px;
  color: #f4e2db;
  background: rgba(62, 25, 34, .93);
  font-size: 13px;
  line-height: 1.3;
}
.barrier-warning b {
  color: #ffb3a8;
}
@media (max-width: 700px) {
  .detail-stage-grid {
    bottom: 44px;
    gap: 4px;
  }
  .detail-stage-label {
    min-height: 58px;
    padding: 6px;
  }
  .detail-stage-label strong {
    font-size: 13px;
  }
  .detail-stage-label span {
    display: none;
  }
  .detail-note {
    bottom: 6px;
    font-size: 12px;
  }
  .placenta-callout {
    min-width: 120px;
    padding: 6px;
  }
  .placenta-callout span {
    display: none;
  }
  .placenta-callout strong {
    font-size: 12px;
  }
  .exchange-flow {
    bottom: 17%;
    padding: 6px;
    font-size: 12px;
  }
  .separate-blood,
  .barrier-warning {
    padding: 5px;
    font-size: 14px;
  }
  .barrier-warning {
    width: 52%;
  }
}
.brand strong,
.path-title,
.page-count,
.fact-row > span,
.voice-menu > p,
.voice-menu > button b,
.start-card > p,
.timing-row span,
.timing-board p,
.cycle-board > p,
.feelings-board > p,
.cleavage-board > p,
.timeline-board > p,
.birth-board > p,
.signal-node b,
.signal-node small,
.receptor-key,
.changes-grid b,
.changes-grid span,
.variation-note,
.brain-map > b,
.feeling-orbit span,
.hygiene-label span,
.hygiene-strip span,
.cycle-phase,
.cycle-center span,
.uterus-mini > b,
.testis-cut small,
.zoom-tube span,
.mature-sperm small,
.sperm-path,
.anatomy-label,
.prenatal-label,
.orientation-label,
.egg-model b,
.sperm-model b,
.egg-model small,
.sperm-model small,
.chromosome-card b,
.chromosome-card small,
.gametes-board > p,
.route-label,
.route-note,
.fert-stages span,
.fert-note,
.cleavage-stage b,
.lining > b,
.blastocyst b,
.implant-arrow span,
.implant-key span,
.embryo-stage b,
.embryo-stage small,
.embryo-banner,
.month-track strong,
.month-track small,
.growth-bar span,
.exchange-key,
.placenta-filter,
.placenta-filter > b,
.protection-list span,
.filter-note,
.birth-stage h3,
.birth-stage small,
.b3 .birth-uterus::after,
.condom-model > b,
.barrier-wall span,
.barrier-wall i,
.single-use,
.pill-pack i,
.pill-pack span,
.pill-effects i,
.pill-effects span,
.pill-warning span,
.pill-warning strong,
.detail-stage-label span,
.fetal-growth-detail-board .detail-stage-label span,
.placenta-callout span,
.barrier-warning,
.detail-stage-label strong,
.detail-note,
.placenta-callout strong,
.exchange-flow {
  font-size: 15px;
}
.condom-benefits span {
  font-size: 18px;
}
.start-screen {
  background:
    radial-gradient(
      circle at 78% 32%,
      rgba(114, 220, 226, .22),
      transparent 20%),
    linear-gradient(
      90deg,
      rgba(3, 15, 23, .97),
      rgba(3, 15, 23, .72)),
    repeating-linear-gradient(
      135deg,
      transparent 0 45px,
      rgba(114, 220, 226, .06) 45px 47px);
}
.start-screen::after {
  content: "F = 3 N     W = F \b7  s     v = s : t";
  position: absolute;
  right: 5vw;
  bottom: 16vh;
  color: rgba(178, 235, 238, .18);
  font-size: clamp(24px, 4vw, 64px);
  font-weight: 900;
  transform: rotate(-8deg);
}
.start-card {
  position: relative;
  z-index: 2;
  max-width: 830px;
}
.start-note {
  font-size: 16px;
  line-height: 1.45;
}
.start-card > small {
  font-size: 15px;
}
.content-column h1 {
  font-size: clamp(34px, 3.25vw, 51px);
}
.eyebrow {
  font-size: 15px;
}
.memory-card span {
  font-size: 15px;
}
.memory-card p {
  font-size: clamp(17px, 1.35vw, 21px);
}
.fact-row > span {
  font-size: 15px;
  line-height: 1.3;
}
.science-board {
  width: 100%;
  max-width: 940px;
  aspect-ratio: 1.6;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: clamp(24px, 3vw, 42px);
  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(var(--accent-rgb), .12),
      transparent 28%),
    linear-gradient(
      150deg,
      #0c2e40,
      #061923 72%);
  box-shadow: 0 34px 78px rgba(0, 0, 0, .4);
}
.science-board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 -80px 95px rgba(2, 12, 18, .26);
}
.science-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.science-svg text {
  font-family: inherit;
}
.floor-shadow {
  fill: rgba(0, 0, 0, .35);
}
.force-vector,
.load-vector,
.motion-force,
.friction-force,
.energy-arrow,
.chain-arrow,
.pull-arrow,
.small-force,
.large-force,
.inertia-arrow,
.brake-arrow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 12;
  stroke-linecap: round;
  color: var(--accent);
  marker-end: url(#arrow);
  filter: drop-shadow(0 0 9px rgba(var(--accent-rgb), .6));
}
.force-vector.down,
.load-vector {
  stroke: #ff9d89;
  color: #ff9d89;
}
.force-vector.up {
  stroke: #78e6b2;
  color: #78e6b2;
}
.leader {
  fill: none;
  stroke: #b6ced7;
  stroke-width: 3;
  stroke-dasharray: 7 7;
}
.diagram-label,
.scene-label,
.lever-label,
.wheelbarrow-label,
.inertia-label {
  position: absolute;
  z-index: 8;
  padding: 11px 14px;
  border: 2px solid rgba(255, 255, 255, .26);
  border-radius: 15px;
  background: rgba(3, 20, 30, .91);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
}
.diagram-label b,
.scene-label b,
.lever-label b,
.wheelbarrow-label b,
.inertia-label b {
  display: block;
  color: #fff;
  font-size: 17px;
}
.diagram-label span,
.scene-label span,
.lever-label span,
.wheelbarrow-label span,
.inertia-label span {
  display: block;
  margin-top: 4px;
  color: #bad0d8;
  font-size: 15px;
  line-height: 1.3;
}
.shoe {
  fill: url(#metal);
  stroke: #a8c9d4;
  stroke-width: 4;
}
.ball {
  fill: url(#warm);
  stroke: #ffe6af;
  stroke-width: 5;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .32));
  animation: ballKick 3.6s ease-in-out infinite;
}
@keyframes ballKick {
  0%, 18% {
    transform: translateX(-25px);
    transform-origin: center;
  }
  55%, 100% {
    transform: translateX(88px);
  }
}
.ball-scene .force-vector {
  animation: vectorPulse 3.6s ease-in-out infinite;
}
.sponge {
  fill: #62c8bb;
  stroke: #b6fff3;
  stroke-width: 5;
  transform-box: fill-box;
  transform-origin: center;
  animation: spongeCompress 3.8s ease-in-out infinite;
}
.hand-top {
  fill: #dfaa8d;
  stroke: #f1c7ac;
  stroke-width: 4;
}
.deform-lines {
  fill: none;
  stroke: #d9fff6;
  stroke-width: 5;
  opacity: .65;
}
.force-vector.down {
  animation: downPulse 3.8s ease-in-out infinite;
}
@keyframes spongeCompress {
  50% {
    transform: scaleY(.62) translateY(48px);
  }
}
@keyframes downPulse {
  50% {
    transform: translateY(40px);
  }
}
@keyframes vectorPulse {
  50% {
    stroke-width: 17;
    filter: drop-shadow(0 0 16px var(--accent));
  }
}
.scene-label.left {
  left: 5%;
  bottom: 5%;
}
.scene-label.right {
  right: 5%;
  bottom: 5%;
}
.effect-grid {
  height: 100%;
  padding: 6%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.effect-card {
  position: relative;
  padding: 18px;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: 1fr auto;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 25px;
  background: rgba(255, 255, 255, .045);
  animation: cardFocus 6s ease-in-out var(--delay) infinite;
}
.effect-number {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #061922;
  background: var(--accent);
  font-size: 16px;
  font-weight: 950;
}
.effect-demo {
  position: relative;
}
.effect-demo i {
  position: absolute;
}
.demo-body {
  left: 25%;
  top: 42%;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      #f5ce78,
      #c87f43);
  box-shadow: 0 14px 25px rgba(0, 0, 0, .3);
}
.demo-track {
  left: 7%;
  right: 7%;
  bottom: 10%;
  height: 5px;
  border-radius: 5px;
  background: #456575;
}
.demo-force {
  top: 49%;
  width: 110px;
  height: 10px;
  border-radius: 8px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.demo-force::after {
  content: "";
  position: absolute;
  right: -12px;
  top: -6px;
  border-width: 11px 0 11px 16px;
  border-style: solid;
  border-color: transparent transparent transparent var(--accent);
}
.speed .demo-force {
  left: 3%;
}
.brake .demo-force {
  right: 3%;
  transform: rotate(180deg);
}
.turn .demo-track {
  width: 130px;
  height: 80px;
  left: 25%;
  border: 0;
  border-left: 5px solid #456575;
  border-bottom: 5px solid #456575;
  border-radius: 0 0 0 80px;
  background: none;
}
.turn .demo-force {
  left: 56%;
  top: 30%;
  transform: rotate(-90deg);
}
.shape .demo-body {
  width: 100px;
  height: 54px;
  border-radius: 50%;
  animation: bodySquash 3s ease-in-out infinite;
}
.shape .demo-force {
  left: 4%;
  width: 72px;
}
.effect-card > b {
  grid-column: 1/-1;
  color: #fff;
  font-size: 18px;
  text-align: center;
  text-transform: capitalize;
}
@keyframes bodySquash {
  50% {
    transform: scaleX(.68) scaleY(1.22);
  }
}
.crate {
  fill: url(#warm);
  stroke: #ffe4ac;
  stroke-width: 5;
}
.crate-brace {
  fill: none;
  stroke: rgba(81, 40, 22, .48);
  stroke-width: 12;
}
.attack-point {
  fill: #fff4b0;
  stroke: #ff9d75;
  stroke-width: 7;
}
.force-vector.huge {
  stroke-width: 18;
  animation: vectorPulse 2.8s ease-in-out infinite;
}
.diagram-label.attack {
  left: 7%;
  top: 8%;
}
.diagram-label.length {
  right: 4%;
  top: 8%;
}
.diagram-label.direction {
  right: 4%;
  bottom: 5%;
}
.three-models {
  height: 100%;
  padding: 6%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.three-models section {
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 27px;
  background: rgba(255, 255, 255, .04);
}
.three-models section > div {
  width: 100%;
  height: 330px;
  position: relative;
}
.three-models section > b {
  font-size: 19px;
}
.three-models section > span {
  margin-top: 5px;
  color: #bad0d8;
  font-size: 15px;
  text-align: center;
}
.planet {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 180px;
  height: 90px;
  transform: translateX(-50%);
  border-radius: 180px 180px 0 0;
  background:
    radial-gradient(
      circle at 55% 35%,
      #73d2b2,
      #2c7182 52%,
      #173c5a);
}
.mass {
  position: absolute;
  left: 50%;
  top: 35px;
  width: 62px;
  height: 62px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: #f2c26c;
}
.vertical-arrow {
  position: absolute;
  left: calc(50% - 6px);
  top: 105px;
  width: 12px;
  height: 128px;
  background: #ff9d89;
  box-shadow: 0 0 12px #ff9d89;
}
.vertical-arrow::after {
  content: "";
  position: absolute;
  left: -9px;
  bottom: -13px;
  border-width: 16px 15px 0;
  border-style: solid;
  border-color: #ff9d89 transparent transparent;
}
.block {
  position: absolute;
  left: 50%;
  top: 115px;
  width: 125px;
  height: 100px;
  transform: translateX(-50%);
  border-radius: 16px;
  background: #d59c4d;
}
.friction-model em {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 217px;
  height: 62px;
  background:
    repeating-linear-gradient(
      135deg,
      #304f5e 0 12px,
      #1b3542 12px 24px);
}
.motion-arrow,
.friction-arrow {
  position: absolute;
  top: 50px;
  width: 92px;
  height: 10px;
  border-radius: 8px;
  background: var(--accent);
}
.motion-arrow {
  left: 50%;
  margin-left: 8px;
}
.friction-arrow {
  right: 50%;
  margin-right: 8px;
  background: #ff9d89;
}
.motion-arrow::after,
.friction-arrow::after {
  content: "";
  position: absolute;
  top: -6px;
  border-width: 11px 0 11px 16px;
  border-style: solid;
}
.motion-arrow::after {
  right: -13px;
  border-color: transparent transparent transparent var(--accent);
}
.friction-arrow::after {
  left: -13px;
  transform: rotate(180deg);
  border-color: transparent transparent transparent #ff9d89;
}
.anchor {
  position: absolute;
  left: 24px;
  top: 35px;
  bottom: 35px;
  width: 18px;
  border-radius: 9px;
  background: #8fb4c1;
}
.coil {
  position: absolute;
  left: 42px;
  top: 105px;
  width: 190px;
  height: 90px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 9px,
      #9bdfe4 10px 14px,
      transparent 15px 23px);
  transform: skewX(-14deg);
  animation: springStretch 3.5s ease-in-out infinite;
}
.puller {
  position: absolute;
  right: 16px;
  top: 87px;
  width: 58px;
  height: 125px;
  border-radius: 14px;
  background: #efaa82;
}
.spring-model span {
  position: absolute;
  left: 85px;
  bottom: 55px;
  color: #ff9d89;
  font-size: 18px;
}
.spring-model span::before {
  content: "Federkraft \2190";
  white-space: nowrap;
}
@keyframes springStretch {
  50% {
    width: 245px;
  }
}

/* ../../sites/msl-mensch-und-gesundheit-7/app/mechanics.css */
.unit-card {
  position: absolute;
  left: 6%;
  top: 10%;
  z-index: 5;
  width: 330px;
  height: 350px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 35px;
  background:
    linear-gradient(
      145deg,
      rgba(var(--accent-rgb), .16),
      rgba(255, 255, 255, .03));
  box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
}
.unit-card span {
  font-size: 120px;
  font-weight: 950;
  line-height: .7;
}
.unit-card b {
  margin-top: -55px;
  font-size: 28px;
}
.unit-card i {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin-top: -65px;
  border-radius: 20px;
  color: #061923;
  background: var(--accent);
  font-size: 38px;
  font-style: normal;
  font-weight: 950;
}
.hang-line,
.meter-rod {
  fill: none;
  stroke: #bed9e1;
  stroke-width: 7;
}
.mini-spring,
.meter-spring {
  fill: none;
  stroke: #8de0e5;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.weight-100,
.hanging-mass {
  fill: url(#metal);
  stroke: #d9eff5;
  stroke-width: 5;
}
.weight-handle {
  fill: none;
  stroke: #cce5eb;
  stroke-width: 10;
}
.mass-note {
  position: absolute;
  right: 5%;
  bottom: 10%;
  z-index: 5;
  width: 335px;
  padding: 14px 17px;
  border-left: 5px solid var(--accent);
  border-radius: 0 18px 18px 0;
  background: rgba(4, 22, 32, .9);
}
.mass-note b,
.mass-note span,
.mass-note strong {
  display: block;
}
.mass-note b {
  font-size: 26px;
}
.mass-note span {
  margin: 5px 0;
  color: #bad0d8;
  font-size: 15px;
}
.mass-note strong {
  color: var(--accent);
  font-size: 18px;
}
.newton-name {
  position: absolute;
  left: 6%;
  bottom: 6%;
  z-index: 5;
  color: #c7d8de;
  font-size: 15px;
}
.newton-name b {
  color: #fff;
}
.meter-shell {
  fill: url(#metal);
  stroke: #d9eff5;
  stroke-width: 7;
}
.meter-window {
  fill: #061722;
  stroke: #658695;
  stroke-width: 5;
}
.meter-pointer {
  stroke: #ff9d89;
  stroke-width: 8;
}
.scale-tick {
  stroke: #cce0e6;
  stroke-width: 4;
}
.svg-number {
  fill: #dfeef2;
  font-size: 22px;
  font-weight: 800;
}
.svg-unit {
  fill: var(--accent);
  font-size: 28px;
  font-weight: 950;
}
.hook {
  fill: none;
  stroke: #c6dce4;
  stroke-width: 10;
  stroke-linecap: round;
}
.diagram-label.zero {
  right: 3%;
  top: 7%;
}
.diagram-label.pointer {
  right: 3%;
  top: 36%;
}
.diagram-label.hook-label {
  right: 3%;
  bottom: 5%;
}
.meter-spring,
.meter-rod,
.meter-pointer,
.hook {
  animation: meterStretch 4s ease-in-out infinite;
  transform-origin: 445px 125px;
}
@keyframes meterStretch {
  50% {
    transform: scaleY(1.14);
  }
}
.axis {
  fill: none;
  stroke: #d4e7ec;
  stroke-width: 6;
  stroke-linecap: round;
}
.grid-line {
  stroke: #6a8590;
  stroke-width: 2;
  stroke-dasharray: 6 8;
  opacity: .42;
}
.axis-label {
  fill: #dcebef;
  font-size: 23px;
  font-weight: 850;
}
.axis-label.vertical {
  transform: rotate(-90deg);
  transform-origin: 34px 78px;
}
.graph-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .55));
}
.graph-point {
  fill: #fff3b4;
  stroke: var(--accent);
  stroke-width: 7;
  animation: pointPop 4s ease-in-out var(--delay) infinite;
}
@keyframes pointPop {
  0%, 20% {
    r: 18px;
    filter: drop-shadow(0 0 14px var(--accent));
  }
  35%, 100% {
    r: 12px;
    filter: none;
  }
}
.measure-bracket {
  fill: none;
  stroke: #ff9d89;
  stroke-width: 6;
}
.graph-rule {
  position: absolute;
  right: 3%;
  bottom: 6%;
  z-index: 5;
  padding: 13px 16px;
  border-radius: 16px;
  background: rgba(3, 20, 30, .93);
  font-size: 15px;
}
.graph-rule b {
  display: block;
  color: var(--accent);
  font-size: 18px;
}
.graph-rule span {
  display: block;
  margin-top: 3px;
  color: #c1d2d8;
}
.sliding-block {
  fill: url(#warm);
  stroke: #ffe4a7;
  stroke-width: 5;
}
.surface {
  fill: none;
  stroke: #b8d5dc;
  stroke-width: 8;
  stroke-linejoin: round;
}
.surface.bottom {
  fill: #213f4d;
  stroke: #668694;
}
.friction-force {
  stroke: #ff9d89;
  color: #ff9d89;
}
.road rect {
  stroke-width: 4;
}
.road.dry rect {
  fill: #30434a;
  stroke: #77909a;
}
.road.ice rect {
  fill: #7cc9df;
  stroke: #d5f7ff;
}
.road path {
  stroke: #fff2b0;
  stroke-width: 7;
  stroke-dasharray: 28 20;
}
.shoe path {
  fill: #dce9ed;
  stroke: #fff;
  stroke-width: 4;
}
.force-tag {
  position: absolute;
  z-index: 5;
  top: 8%;
  padding: 9px 13px;
  border-radius: 12px;
  color: #061923;
  font-size: 16px;
  font-weight: 900;
}
.force-tag.motion {
  left: 8%;
  background: var(--accent);
}
.force-tag.friction {
  left: 32%;
  background: #ff9d89;
}
.road-label {
  position: absolute;
  right: 4%;
  z-index: 5;
  width: 33%;
  padding: 10px 14px;
  border-radius: 15px;
  background: rgba(3, 20, 30, .9);
}
.road-label.dry {
  top: 31%;
}
.road-label.ice {
  bottom: 7%;
}
.road-label b,
.road-label span {
  display: block;
}
.road-label b {
  font-size: 17px;
}
.road-label span {
  margin-top: 3px;
  color: #bad0d8;
  font-size: 15px;
}
.work-compare {
  height: 100%;
  padding: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.work-compare section {
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  background: rgba(255, 255, 255, .04);
}
.person {
  position: absolute;
  left: 18%;
  top: 15%;
  width: 95px;
  height: 240px;
}
.person i {
  position: absolute;
  left: 25px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #dda989;
}
.person b {
  position: absolute;
  left: 30px;
  top: 64px;
  width: 48px;
  height: 125px;
  border-radius: 22px;
  background: linear-gradient(#75d9d2, #2c7a91);
}
.person span {
  position: absolute;
  left: 60px;
  top: 92px;
  width: 100px;
  height: 15px;
  transform: rotate(-20deg);
  border-radius: 8px;
  background: #dda989;
}
.work-box {
  position: absolute;
  right: 13%;
  top: 26%;
  width: 125px;
  height: 105px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #30200f;
  background:
    linear-gradient(
      145deg,
      #f8d47d,
      #c88942);
  font-size: 17px;
  font-weight: 900;
}
.work-compare h3 {
  margin: 0;
  font-size: 21px;
}
.work-compare p {
  min-height: 48px;
  margin: 6px 0 0;
  color: #b9ced6;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
}
.force-up {
  position: absolute;
  right: 29%;
  top: 13%;
  width: 11px;
  height: 112px;
  background: var(--accent);
}
.force-up::after {
  content: "";
  position: absolute;
  left: -8px;
  top: -13px;
  border-width: 0 14px 17px;
  border-style: solid;
  border-color: transparent transparent var(--accent);
}
.work-compare em {
  position: absolute;
  right: 7%;
  top: 8%;
  padding: 8px 10px;
  border-radius: 10px;
  color: #061923;
  background: var(--accent);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}
.lift .work-box,
.lift .force-up {
  animation: liftWork 3.5s ease-in-out infinite;
}
@keyframes liftWork {
  50% {
    transform: translateY(-80px);
  }
}
.formula-main {
  position: absolute;
  left: 5%;
  top: 8%;
  width: 90%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border-radius: 28px;
  background: rgba(var(--accent-rgb), .1);
}
.formula-main span {
  width: 105px;
  height: 105px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: #061923;
  background: var(--accent);
  font-size: 55px;
  font-weight: 950;
}
.formula-main i {
  font-size: 45px;
  font-style: normal;
  font-weight: 800;
}
.formula-meaning {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 39%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.formula-meaning span {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  color: #c2d4da;
  font-size: 15px;
  text-align: center;
}
.formula-meaning b {
  margin-right: 8px;
  color: var(--accent);
  font-size: 20px;
}
.formula-example {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 6%;
  height: 180px;
}
.example-crate {
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 130px;
  height: 100px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #3c2914;
  background:
    linear-gradient(
      145deg,
      #f7d27d,
      #c98942);
  font-size: 17px;
  font-weight: 900;
  animation: crateMove 5s ease-in-out infinite;
}
.example-crate i {
  position: absolute;
  right: -90px;
  width: 78px;
  height: 10px;
  background: var(--accent);
}
.example-crate i::after {
  content: "";
  position: absolute;
  right: -12px;
  top: -6px;
  border-width: 11px 0 11px 16px;
  border-style: solid;
  border-color: transparent transparent transparent var(--accent);
}
.example-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  border-radius: 8px;
  background: #5f7c89;
}
.example-track span {
  position: absolute;
  left: 42%;
  bottom: 20px;
  color: #bad0d8;
  font-size: 15px;
}
.formula-example strong {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 15px;
  border-radius: 15px;
  color: #061923;
  background: var(--accent);
  font-size: 19px;
}
@keyframes crateMove {
  50% {
    transform: translateX(360px);
  }
}
.platform {
  fill: #46616e;
}
.energy-mass {
  fill: url(#warm);
  stroke: #ffe6ac;
  stroke-width: 5;
}
.energy-mass.falling {
  animation: energyFall 4.8s ease-in infinite;
}
.impact {
  fill: none;
  stroke: #ff9d89;
  stroke-width: 9;
}
.heat-dot {
  fill: #ffbb6c;
  animation: heatRise 2.2s ease-out infinite;
}
.chain-arrow {
  stroke-width: 8;
}
.energy-label {
  position: absolute;
  z-index: 5;
  bottom: 6%;
  width: 28%;
  padding: 12px;
  border-radius: 15px;
  background: rgba(3, 20, 30, .9);
  text-align: center;
}
.energy-label.a {
  left: 3%;
}
.energy-label.b {
  left: 36%;
}
.energy-label.c {
  right: 3%;
}
.energy-label b,
.energy-label span {
  display: block;
}
.energy-label b {
  font-size: 17px;
}
.energy-label span {
  margin-top: 4px;
  color: #bad0d8;
  font-size: 15px;
}
@keyframes energyFall {
  0%, 15% {
    transform: translateY(-80px);
  }
  70%, 100% {
    transform: translateY(150px);
  }
}
@keyframes heatRise {
  to {
    transform: translateY(-55px);
    opacity: 0;
  }
}
.lever-beam,
.seesaw-beam {
  fill: none;
  stroke: url(#metal);
  stroke-width: 36;
  stroke-linecap: round;
}
.fulcrum {
  fill: #f1c76e;
  stroke: #ffe5a4;
  stroke-width: 5;
}
.pivot,
.hub {
  fill: #081b27;
  stroke: var(--accent);
  stroke-width: 7;
}
.lever-load {
  fill: url(#warm);
  stroke: #ffe4a5;
  stroke-width: 5;
}
.dimension {
  fill: none;
  stroke: #92acb7;
  stroke-width: 4;
}
.lever-label.force {
  left: 3%;
  top: 5%;
}
.lever-label.pivot-label {
  left: 42%;
  bottom: 4%;
}
.lever-label.load {
  right: 3%;
  top: 5%;
}
.arm-label {
  position: absolute;
  z-index: 5;
  bottom: 17%;
  padding: 8px 13px;
  border-radius: 12px;
  color: #061923;
  background: var(--accent);
  font-size: 15px;
  font-weight: 900;
}
.arm-label.force {
  left: 26%;
}
.arm-label.load {
  right: 18%;
}
.seesaw-person path {
  fill: none;
  stroke: #d9e8ec;
  stroke-width: 12;
  stroke-linecap: round;
}
.seesaw-person circle {
  fill: #dba98b;
}
.seesaw-person text {
  fill: #dcebef;
  font-size: 22px;
  font-weight: 850;
}
.balance-rule {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 4%;
  z-index: 5;
  padding: 13px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  border-radius: 16px;
  background: rgba(3, 20, 30, .93);
  font-size: 15px;
  text-align: center;
}
.balance-rule b {
  color: var(--accent);
}
.wheel {
  fill: #273e49;
  stroke: #9ebac5;
  stroke-width: 9;
}
.barrow-frame {
  fill: none;
  stroke: url(#metal);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.barrow-bowl {
  fill: #678b7b;
  stroke: #b8e4cb;
  stroke-width: 7;
}
.wheelbarrow-label.pivot {
  left: 2%;
  bottom: 4%;
}
.wheelbarrow-label.load {
  left: 37%;
  top: 4%;
}
.wheelbarrow-label.force {
  right: 2%;
  bottom: 4%;
}
.tool-grid {
  height: 100%;
  padding: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tool-grid section {
  padding: 14px;
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 23px;
  background: rgba(255, 255, 255, .04);
  animation: cardFocus 6s ease-in-out var(--delay) infinite;
}
.tool-drawing {
  grid-row: 1/3;
  position: relative;
}
.tool-arm {
  position: absolute;
  left: 70px;
  top: 10px;
  width: 18px;
  height: 180px;
  border-radius: 10px;
  background: linear-gradient(#dcebef, #526f7d);
  transform-origin: 50% 55px;
}
.tool-arm.a {
  transform: rotate(28deg);
}
.tool-arm.b {
  transform: rotate(-28deg);
}
.tool-pivot {
  position: absolute;
  left: 65px;
  top: 56px;
  width: 28px;
  height: 28px;
  border: 7px solid var(--accent);
  border-radius: 50%;
  background: #061923;
}
.tool-load {
  position: absolute;
  left: 65px;
  top: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1bf67;
}
.tool-grid section > b {
  align-self: end;
  font-size: 19px;
}
.tool-grid section > span {
  color: #b8ccd4;
  font-size: 15px;
}
.tool-rule {
  position: absolute;
  left: 50%;
  bottom: 3%;
  z-index: 5;
  transform: translateX(-50%);
  width: max-content;
  padding: 9px 14px;
  border-radius: 999px;
  color: #061923;
  background: var(--accent);
  font-size: 15px;
}
.tool-rule b {
  font-weight: 950;
}
.platform.high {
  fill: #496571;
}
.ramp {
  fill: #385665;
  stroke: #8cabb7;
  stroke-width: 5;
}
.ramp-crate,
.lift-crate {
  fill: url(#warm);
  stroke: #ffe4a7;
  stroke-width: 5;
}
.long-path,
.short-path {
  fill: none;
  stroke: #a7c2cc;
  stroke-width: 4;
  stroke-dasharray: 11 9;
}
.golden-label {
  position: absolute;
  z-index: 5;
  padding: 12px 15px;
  border-radius: 15px;
  background: rgba(3, 20, 30, .92);
}
.golden-label b,
.golden-label span {
  display: block;
}
.golden-label b {
  font-size: 18px;
}
.golden-label span {
  margin-top: 4px;
  color: #bfd2d9;
  font-size: 15px;
}
.golden-label.ramp-label {
  left: 5%;
  bottom: 7%;
}
.golden-label.lift-label {
  right: 4%;
  bottom: 7%;
}
.golden-rule {
  position: absolute;
  left: 50%;
  top: 5%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 11px 18px;
  border-radius: 15px;
  color: #061923;
  background: var(--accent);
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
}
.golden-rule b {
  margin: 0 4px;
  font-weight: 600;
}
.ceiling {
  stroke: #9bb6c0;
  stroke-width: 17;
  stroke-dasharray: 20 9;
}
.pulley-wheel {
  fill: url(#metal);
  stroke: #dbeef3;
  stroke-width: 7;
}
.rope {
  fill: none;
  stroke: #e2c277;
  stroke-width: 9;
  stroke-linecap: round;
}
.pulley-load {
  fill: url(#warm);
  stroke: #ffe5aa;
  stroke-width: 5;
}
.rope-label {
  fill: #fff0b0;
  font-size: 21px;
  font-weight: 900;
}
.pulley-label {
  position: absolute;
  z-index: 5;
  bottom: 4%;
  width: 38%;
  padding: 12px;
  border-radius: 16px;
  background: rgba(3, 20, 30, .92);
  text-align: center;
}
.pulley-label.fixed {
  left: 6%;
}
.pulley-label.loose {
  right: 6%;
}
.pulley-label b,
.pulley-label span {
  display: block;
}
.pulley-label b {
  font-size: 18px;
}
.pulley-label span {
  margin-top: 4px;
  color: #bad0d8;
  font-size: 15px;
}
.ergo-grid {
  height: 100%;
  padding: 5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.ergo-grid section {
  position: relative;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 25px;
  background: rgba(255, 255, 255, .04);
}
.status {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #061923;
  background: #72deb3;
  font-size: 21px;
  font-weight: 950;
}
.wrong .status {
  background: #ff9688;
}
.lift-person {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 100px;
  height: 220px;
  transform: translateX(-50%);
}
.lift-person i {
  position: absolute;
  left: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #dda989;
}
.lift-person b {
  position: absolute;
  left: 35px;
  top: 51px;
  width: 43px;
  height: 110px;
  border-radius: 20px;
  background: #54a7b0;
}
.lift-person em {
  position: absolute;
  left: 45px;
  top: 148px;
  width: 75px;
  height: 14px;
  transform: rotate(45deg);
  border-radius: 8px;
  background: #dda989;
}
.wrong .lift-person {
  transform: translateX(-50%) rotate(35deg);
  transform-origin: bottom;
}
.ergo-box {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 95px;
  height: 78px;
  transform: translateX(-50%);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      #f4d079,
      #c78942);
}
.wrong .ergo-box {
  left: 75%;
  top: 52%;
}
.ergo-grid h3 {
  margin: 0;
  font-size: 18px;
}
.ergo-grid p {
  min-height: 42px;
  margin: 5px 0 0;
  color: #b9ced6;
  font-size: 15px;
  text-align: center;
}
.cart {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 180px;
  height: 125px;
  transform: translateX(-50%);
  border: 9px solid #8eadb8;
  border-top: 0;
}
.cart i {
  position: absolute;
  bottom: -35px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #243b46;
  border: 7px solid #90acb7;
}
.cart i:first-child {
  left: 15px;
}
.cart i:nth-child(2) {
  right: 15px;
}
.cart b {
  position: absolute;
  right: -55px;
  top: -40px;
  width: 75px;
  height: 9px;
  transform: rotate(-35deg);
  background: #90acb7;
}
.route {
  fill: none;
  stroke: #6b8792;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 22 15;
}
.start-dot {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 6;
}
.finish-flag {
  fill: #ff9d89;
  stroke: #ffe1dc;
  stroke-width: 5;
}
.moving-bike {
  fill: none;
  stroke: #e6f1f4;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: bikeTravel 7s ease-in-out infinite;
}
.clock {
  fill: #0e3041;
  stroke: var(--accent);
  stroke-width: 7;
}
.clock-hand {
  fill: none;
  stroke: #fff;
  stroke-width: 7;
  stroke-linecap: round;
  animation: clockTurn 4s linear infinite;
  transform-origin: 200px 170px;
}
.quantity {
  position: absolute;
  z-index: 5;
  bottom: 4%;
  width: 28%;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 45px 1fr;
  border-radius: 15px;
  background: rgba(3, 20, 30, .93);
}
.quantity.s {
  left: 3%;
}
.quantity.t {
  left: 36%;
}
.quantity.v {
  right: 3%;
}
.quantity b {
  grid-row: 1/3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #061923;
  background: var(--accent);
  font-size: 21px;
}
.quantity span {
  font-size: 17px;
  font-weight: 850;
}
.quantity strong {
  color: #bad0d8;
  font-size: 15px;
  font-weight: 500;
}
@keyframes bikeTravel {
  50% {
    transform: translate(300px, -95px);
  }
}
@keyframes clockTurn {
  to {
    transform: rotate(360deg);
  }
}
.formula-triangle {
  position: absolute;
  left: 8%;
  top: 9%;
  width: 360px;
  height: 360px;
  border-left: 180px solid transparent;
  border-right: 180px solid transparent;
  border-bottom: 340px solid rgba(var(--accent-rgb), .26);
}
.formula-triangle::after {
  content: "";
  position: absolute;
  left: -148px;
  top: 72px;
  width: 296px;
  height: 220px;
  border-top: 5px solid var(--accent);
}
.formula-triangle span {
  position: absolute;
  z-index: 3;
  width: 75px;
  height: 75px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #061923;
  background: var(--accent);
  font-size: 34px;
  font-weight: 950;
}
.formula-triangle .top {
  left: -38px;
  top: 55px;
}
.formula-triangle .left {
  left: -125px;
  top: 210px;
}
.formula-triangle .right {
  right: -125px;
  top: 210px;
}
.speed-equation {
  position: absolute;
  right: 5%;
  top: 10%;
  width: 42%;
  display: grid;
  gap: 12px;
}
.speed-equation > * {
  padding: 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  font-size: 21px;
  text-align: center;
}
.speed-equation b {
  color: #061923;
  background: var(--accent);
  font-size: 28px;
}
.speed-equation strong {
  color: #ffe7a7;
  border: 2px solid #ffe7a7;
}
.speed-strip {
  position: absolute;
  left: 48%;
  right: 5%;
  bottom: 10%;
  height: 80px;
  border-bottom: 8px solid #587584;
}
.speed-strip span,
.speed-strip em {
  position: absolute;
  bottom: 14px;
  color: #c7d9df;
  font-size: 16px;
  font-style: normal;
}
.speed-strip span {
  left: 40%;
}
.speed-strip em {
  right: 0;
}
.bike-dot {
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  animation: speedDot 4s linear infinite;
}
@keyframes speedDot {
  to {
    left: calc(100% - 38px);
  }
}
.conversion-side {
  position: absolute;
  top: 13%;
  width: 32%;
  height: 285px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 30px;
  background: rgba(255, 255, 255, .045);
  overflow: hidden;
}
.conversion-side.ms {
  left: 5%;
}
.conversion-side.kmh {
  right: 5%;
}
.conversion-side b {
  font-size: 92px;
  line-height: .9;
}
.conversion-side span {
  margin-top: 14px;
  color: var(--accent);
  font-size: 30px;
  font-weight: 900;
}
.speed-lines {
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 45px,
      rgba(var(--accent-rgb), .2) 45px 51px);
  animation: speedLines 2s linear infinite;
}
.conversion-machine {
  position: absolute;
  left: 40%;
  top: 20%;
  width: 20%;
  height: 235px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.conversion-machine span {
  padding: 9px 12px;
  border-radius: 12px;
  color: #061923;
  background: var(--accent);
  font-size: 18px;
  font-weight: 900;
}
.conversion-machine b {
  font-size: 44px;
}
.conversion-note {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 7%;
  padding: 14px;
  border-left: 5px solid var(--accent);
  border-radius: 0 16px 16px 0;
  background: rgba(3, 20, 30, .92);
  text-align: center;
}
.conversion-note b,
.conversion-note span {
  display: block;
}
.conversion-note b {
  font-size: 22px;
}
.conversion-note span {
  margin-top: 4px;
  color: #bfd2d9;
  font-size: 15px;
}
@keyframes speedLines {
  to {
    left: 100%;
  }
}
.graph {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}
.graph.slow {
  stroke: #72deb3;
}
.graph.fast {
  stroke: #f4c76e;
}
.graph.stop {
  stroke: #ff9b8c;
}
.graph-label {
  position: absolute;
  z-index: 5;
  padding: 9px 13px;
  border-radius: 13px;
  background: rgba(3, 20, 30, .93);
}
.graph-label b,
.graph-label span {
  display: block;
}
.graph-label b {
  font-size: 17px;
}
.graph-label span {
  color: #bdd0d8;
  font-size: 15px;
}
.graph-label.fast {
  left: 48%;
  top: 9%;
  border: 2px solid #f4c76e;
}
.graph-label.slow {
  right: 4%;
  top: 39%;
  border: 2px solid #72deb3;
}
.graph-label.stop {
  right: 4%;
  bottom: 22%;
  border: 2px solid #ff9b8c;
}
.motion-strips {
  height: 100%;
  padding: 6%;
  display: grid;
  gap: 16px;
}
.motion-strips section {
  position: relative;
  padding: 15px 18px;
  display: grid;
  grid-template-columns: 180px 1fr 55px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 22px;
  background: rgba(255, 255, 255, .04);
}
.motion-strips section > b {
  font-size: 18px;
}
.dot-track {
  height: 95px;
  position: relative;
}
.dot-track i {
  position: absolute;
  top: 38px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .5);
  animation: dotPulse 4s ease-in-out var(--delay) infinite;
}
.speedUp i:nth-child(1) {
  left: 2%;
}
.speedUp i:nth-child(2) {
  left: 10%;
}
.speedUp i:nth-child(3) {
  left: 21%;
}
.speedUp i:nth-child(4) {
  left: 35%;
}
.speedUp i:nth-child(5) {
  left: 52%;
}
.speedUp i:nth-child(6) {
  left: 72%;
}
.speedUp i:nth-child(7) {
  left: 95%;
}
.slowDown i:nth-child(1) {
  left: 2%;
}
.slowDown i:nth-child(2) {
  left: 25%;
}
.slowDown i:nth-child(3) {
  left: 45%;
}
.slowDown i:nth-child(4) {
  left: 62%;
}
.slowDown i:nth-child(5) {
  left: 76%;
}
.slowDown i:nth-child(6) {
  left: 87%;
}
.slowDown i:nth-child(7) {
  left: 95%;
}
.turning .dot-track i:nth-child(1) {
  left: 4%;
  top: 55px;
}
.turning .dot-track i:nth-child(2) {
  left: 19%;
  top: 49px;
}
.turning .dot-track i:nth-child(3) {
  left: 34%;
  top: 35px;
}
.turning .dot-track i:nth-child(4) {
  left: 49%;
  top: 17px;
}
.turning .dot-track i:nth-child(5) {
  left: 64%;
  top: 8px;
}
.turning .dot-track i:nth-child(6) {
  left: 80%;
  top: 16px;
}
.turning .dot-track i:nth-child(7) {
  left: 94%;
  top: 35px;
}
.result-force {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #061923;
  background: #ff9b8c;
  font-size: 18px;
  font-weight: 950;
}
@keyframes dotPulse {
  0%, 15% {
    transform: scale(1.45);
    filter: brightness(1.4);
  }
  25%, 100% {
    transform: none;
    filter: none;
  }
}
.roadway {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 13%;
  height: 210px;
  border-radius: 28px;
  background: linear-gradient(#263d48 0 68%, #364d55 68%);
  overflow: hidden;
}
.roadway::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 38px;
  height: 7px;
  background:
    repeating-linear-gradient(
      90deg,
      #fff1b2 0 45px,
      transparent 45px 75px);
}
.hazard {
  position: absolute;
  left: 4%;
  top: 24px;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #24130f;
  background: #ff9b8c;
  font-size: 35px;
  font-weight: 950;
}
.car {
  position: absolute;
  left: 11%;
  bottom: 40px;
  width: 180px;
  height: 80px;
  border-radius: 35px 45px 16px 16px;
  background:
    linear-gradient(
      145deg,
      #76dce0,
      #245c76);
  animation: carStop 6s ease-out infinite;
}
.car i {
  position: absolute;
  bottom: -20px;
  width: 43px;
  height: 43px;
  border: 8px solid #8faab5;
  border-radius: 50%;
  background: #172c36;
}
.car i:first-child {
  left: 25px;
}
.car i:nth-child(2) {
  right: 25px;
}
.car b {
  position: absolute;
  left: 44px;
  top: -38px;
  width: 92px;
  height: 45px;
  border-radius: 40px 40px 0 0;
  background: #4e99ab;
}
.stop-line {
  position: absolute;
  right: 4%;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #ff9b8c;
}
.path-segments {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 55%;
  height: 105px;
  display: grid;
  grid-template-columns: 3fr 5fr;
}
.path-segments span {
  padding: 12px 16px;
  border-top: 8px solid;
}
.path-segments .reaction {
  border-color: #f4c76e;
  background: rgba(244, 199, 110, .08);
}
.path-segments .braking {
  border-color: #ff9b8c;
  background: rgba(255, 155, 140, .08);
}
.path-segments b,
.path-segments strong,
.path-segments small {
  display: block;
}
.path-segments b {
  font-size: 17px;
}
.path-segments strong {
  font-size: 25px;
}
.path-segments small {
  color: #bdd0d7;
  font-size: 15px;
}
.stopping-total {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: max-content;
  padding: 10px 17px;
  border-radius: 14px;
  color: #061923;
  background: var(--accent);
  font-size: 17px;
}
.stopping-total b {
  font-weight: 950;
}
@keyframes carStop {
  0% {
    left: 11%;
  }
  45% {
    left: 42%;
  }
  85%, 100% {
    left: 76%;
  }
}
.condition-roads {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 5%;
  height: 340px;
  display: grid;
  gap: 11px;
}
.condition-roads section {
  position: relative;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: 170px 1fr 155px;
  align-items: center;
  border-radius: 18px;
  overflow: hidden;
}
.condition-roads .dry {
  background: #334851;
}
.condition-roads .wet {
  background: #284955;
}
.condition-roads .ice {
  background: #548da1;
}
.mini-car {
  position: relative;
  width: 125px;
  height: 55px;
  border-radius: 24px 32px 10px 10px;
  background: #72dce2;
}
.mini-car i {
  position: absolute;
  bottom: -12px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #152c36;
  border: 5px solid #9eb6bf;
}
.mini-car i:first-child {
  left: 15px;
}
.mini-car i:last-child {
  right: 15px;
}
.skid {
  width: var(--length);
  height: 9px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(
      90deg,
      #101d22 0 26px,
      transparent 26px 38px);
  animation: skidGrow 4s ease-in-out infinite;
}
.condition-roads b {
  font-size: 17px;
}
.condition-roads span {
  color: #e0ecef;
  font-size: 15px;
}
.speed-bars {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 5%;
  display: grid;
  gap: 9px;
}
.speed-bars span {
  display: grid;
  grid-template-columns: 105px 1fr;
  align-items: center;
  gap: 10px;
}
.speed-bars b {
  font-size: 15px;
}
.speed-bars i {
  width: var(--w);
  padding: 8px 10px;
  border-radius: 10px;
  color: #061923;
  background: var(--accent);
  font-size: 15px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}
@keyframes skidGrow {
  0%, 20% {
    width: 8%;
  }
  70%, 100% {
    width: var(--length);
  }
}
.car-shell {
  fill: #3b8197;
  stroke: #8de0e5;
  stroke-width: 6;
}
.window {
  fill: #142f3c;
  stroke: #a5c4ce;
  stroke-width: 4;
}
.car-wheel {
  fill: #172c36;
  stroke: #92aeb8;
  stroke-width: 10;
}
.dummy {
  fill: none;
  stroke: #e7b18f;
  stroke-width: 15;
  stroke-linecap: round;
}
.dummy circle {
  fill: #e7b18f;
  stroke: none;
}
.seatbelt {
  stroke: #f4c76e !important;
  stroke-width: 12 !important;
}
.luggage {
  fill: #d38b55;
  stroke: #f2c595;
  stroke-width: 5;
}
.luggage-strap {
  fill: none;
  stroke: #76deb4;
  stroke-width: 9;
}
.inertia-arrow {
  animation: inertiaPulse 3.5s ease-in-out infinite;
}
.brake-arrow {
  stroke: #ff9b8c;
  color: #ff9b8c;
}
.inertia-label.body {
  left: 3%;
  top: 4%;
}
.inertia-label.belt {
  left: 41%;
  bottom: 3%;
}
.inertia-label.luggage-label {
  right: 3%;
  top: 4%;
}
@keyframes inertiaPulse {
  50% {
    transform: translateX(55px);
    stroke-width: 17;
  }
}
.concept-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 220px;
  height: 150px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 35px;
  background:
    linear-gradient(
      145deg,
      rgba(var(--accent-rgb), .24),
      rgba(3, 20, 30, .95));
  box-shadow: 0 0 40px rgba(var(--accent-rgb), .23);
  font-size: 17px;
  text-align: center;
}
.concept-center b {
  display: block;
  margin-top: -32px;
  font-size: 20px;
}
.concept-node {
  position: absolute;
  z-index: 5;
  width: 230px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 17px;
  background: rgba(3, 20, 30, .93);
  text-align: center;
  animation: conceptPulse 7s ease-in-out infinite;
}
.concept-node.force {
  left: 5%;
  top: 7%;
}
.concept-node.motion {
  right: 5%;
  top: 7%;
  animation-delay: 1.4s;
}
.concept-node.work {
  left: 3%;
  bottom: 8%;
  animation-delay: 2.8s;
}
.concept-node.energy {
  right: 3%;
  bottom: 8%;
  animation-delay: 4.2s;
}
.concept-node.tools {
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  animation-delay: 5.6s;
}
.concept-node b,
.concept-node span {
  display: block;
}
.concept-node b {
  color: var(--accent);
  font-size: 19px;
}
.concept-node span {
  margin-top: 4px;
  color: #c0d2d9;
  font-size: 15px;
}
.concept-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.concept-lines path {
  fill: none;
  stroke: rgba(var(--accent-rgb), .5);
  stroke-width: 5;
  stroke-dasharray: 12 10;
  animation: conceptDash 4s linear infinite;
}
@keyframes conceptDash {
  to {
    stroke-dashoffset: -88;
  }
}
@keyframes conceptPulse {
  0%, 18% {
    border-color: var(--accent);
    box-shadow: 0 0 25px rgba(var(--accent-rgb), .25);
  }
  28%, 100% {
    border-color: rgba(255, 255, 255, .2);
    box-shadow: none;
  }
}
@media (max-width: 1050px) {
  .science-board {
    max-width: 820px;
  }
}
@media (max-width: 700px) {
  .science-board {
    aspect-ratio: 1.45;
    border-radius: 22px;
  }
  .diagram-label span,
  .scene-label span,
  .lever-label span,
  .wheelbarrow-label span,
  .inertia-label span {
    display: none;
  }
  .diagram-label,
  .scene-label,
  .lever-label,
  .wheelbarrow-label,
  .inertia-label {
    padding: 7px 9px;
  }
  .diagram-label b,
  .scene-label b,
  .lever-label b,
  .wheelbarrow-label b,
  .inertia-label b {
    font-size: 15px;
  }
  .effect-grid,
  .three-models,
  .tool-grid,
  .ergo-grid {
    padding: 3%;
    gap: 7px;
  }
  .effect-card {
    padding: 8px;
  }
  .three-models section {
    padding: 8px;
  }
  .three-models section > div {
    height: 240px;
  }
  .balance-rule,
  .golden-rule,
  .tool-rule {
    white-space: normal;
    width: 90%;
    font-size: 15px;
  }
  .concept-node {
    width: 180px;
  }
  .concept-node span {
    display: none;
  }
  .condition-roads section {
    grid-template-columns: 110px 1fr 105px;
  }
  .speed-bars {
    display: none;
  }
}

/* ../../sites/msl-mensch-und-gesundheit-7/app/premium-visuals.css */
.premium-plate {
  width: 100%;
  max-width: 940px;
  aspect-ratio: 1.6;
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(214, 239, 245, .28);
  border-radius: clamp(24px, 3vw, 42px);
  background: #071923;
  box-shadow: 0 34px 78px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  isolation: isolate;
}
.premium-plate > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.98) contrast(1.035) brightness(.89);
  transform: scale(1.01);
  animation: plateBreath 12s ease-in-out infinite alternate;
}
.plate-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(2, 13, 20, .12),
      transparent 45%,
      rgba(2, 13, 20, .28)),
    linear-gradient(
      90deg,
      rgba(2, 13, 20, .1),
      transparent 20%,
      transparent 80%,
      rgba(2, 13, 20, .1));
  box-shadow: inset 0 0 90px rgba(1, 11, 17, .28);
}
@keyframes plateBreath {
  to {
    transform: scale(1.035);
  }
}
.plate-vectors {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.plate-vectors .vector {
  fill: none;
  stroke-width: 13;
  stroke-linecap: round;
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  filter: drop-shadow(0 0 9px rgba(112, 223, 235, .72));
  animation: drawVector 4.8s ease-in-out infinite;
}
.plate-vectors .vector.cool {
  stroke: #7beaf1;
  marker-end: url(#vectorArrow);
}
.plate-vectors .vector.warm {
  stroke: #ffad78;
  marker-end: url(#vectorArrowWarm);
  filter: drop-shadow(0 0 9px rgba(255, 173, 120, .7));
}
.plate-vectors marker path {
  fill: #7beaf1;
}
.plate-vectors marker .warm-head {
  fill: #ffad78;
}
.plate-vectors .draw-b {
  animation-delay: .7s;
}
.plate-vectors .draw-c {
  animation-delay: 1.4s;
}
@keyframes drawVector {
  0%, 12% {
    stroke-dashoffset: 650;
    opacity: .25;
  }
  38%, 82% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: .25;
  }
}
.plate-vectors .leader {
  fill: none;
  stroke: rgba(235, 250, 252, .9);
  stroke-width: 3.5;
  stroke-dasharray: 8 7;
}
.attack-dot {
  fill: #fff4a8;
  stroke: #ff805f;
  stroke-width: 7;
  filter: drop-shadow(0 0 10px #ff8b6c);
  animation: dotPulse 2.2s ease-in-out infinite;
}
.pivot-ring {
  fill: none;
  stroke: #fff0a4;
  stroke-width: 9;
  filter: drop-shadow(0 0 12px #ffe677);
}
.plate-vectors .measure {
  fill: none;
  stroke: #e7f5f7;
  stroke-width: 4;
  stroke-dasharray: 9 7;
}
.plate-tag {
  position: absolute;
  z-index: 6;
  min-width: 190px;
  max-width: 290px;
  min-height: 66px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-left: 5px solid var(--accent);
  border-radius: 15px;
  background: rgba(2, 18, 28, .9);
  box-shadow: 0 16px 35px rgba(0, 0, 0, .34);
  backdrop-filter: blur(9px);
  animation: tagFocus 7s ease-in-out infinite;
}
.plate-tag > span:last-child {
  min-width: 0;
}
.plate-tag strong,
.plate-tag small {
  display: block;
}
.plate-tag strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: .005em;
}
.plate-tag small {
  margin-top: 5px;
  color: #d1e4e9;
  font-size: 15px;
  line-height: 1.26;
  font-weight: 650;
}
.plate-number {
  width: 34px;
  height: 34px;
  display: grid !important;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  color: #06202a;
  background: var(--accent);
  font-size: 17px !important;
  font-weight: 950;
}
.plate-tag.danger {
  border-left-color: #ff897b;
}
.plate-tag.danger .plate-number {
  background: #ff897b;
}
.plate-tag.good {
  border-left-color: #78e3ac;
}
.plate-tag.good .plate-number {
  background: #78e3ac;
}
@keyframes tagFocus {
  0%, 12% {
    border-color: rgba(255, 255, 255, .42);
    border-left-color: var(--accent);
  }
  22%, 72% {
    border-color: rgba(var(--accent-rgb), .78);
    border-left-color: var(--accent);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .34), 0 0 20px rgba(var(--accent-rgb), .2);
  }
  100% {
    border-color: rgba(255, 255, 255, .42);
    border-left-color: var(--accent);
  }
}
.plate-tag.top-left {
  left: 3%;
  top: 3%;
}
.plate-tag.top-center {
  left: 50%;
  top: 3%;
  transform: translateX(-50%);
}
.plate-tag.top-right {
  right: 3%;
  top: 3%;
}
.plate-tag.middle-left {
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
}
.plate-tag.middle-center {
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
}
.plate-tag.middle-right {
  right: 3%;
  top: 41%;
  transform: translateY(-50%);
}
.plate-tag.bottom-left {
  left: 3%;
  bottom: 3%;
}
.plate-tag.bottom-center {
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
}
.plate-tag.bottom-right {
  right: 3%;
  bottom: 3%;
}
.plate-force-intro .plate-tag {
  max-width: 305px;
}
.plate-force-intro .plate-tag:nth-of-type(3),
.plate-force-intro .plate-tag:nth-of-type(4) {
  animation-delay: 1.4s;
}
.plate-force-intro .plate-tag:nth-of-type(5) {
  animation-delay: 2.8s;
}
.plate-force-intro .plate-tag:nth-of-type(6) {
  animation-delay: 4.2s;
}
.plate-force-kinds .plate-tag {
  min-width: 205px;
  max-width: 235px;
}
.plate-force-kinds .bottom-left {
  left: 2%;
}
.plate-force-kinds .bottom-right {
  right: 2%;
}
.plate-meter .top-right,
.plate-meter .middle-right,
.plate-meter .bottom-right {
  right: 4%;
  min-width: 245px;
}
.plate-meter .bottom-right {
  bottom: 4%;
}
.unit-emblem {
  position: absolute;
  z-index: 5;
  right: 7%;
  top: 11%;
  width: 245px;
  height: 245px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding: 24px;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 36px;
  background: rgba(3, 22, 33, .88);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .4), 0 0 32px rgba(var(--accent-rgb), .2);
}
.unit-emblem b {
  font-size: 118px;
  line-height: .8;
}
.unit-emblem span {
  grid-column: 1/-1;
  color: #d5e8ec;
  font-size: 22px;
  font-weight: 850;
}
.unit-emblem strong {
  grid-row: 1;
  font-size: 64px;
  color: var(--accent);
}
.graph-inset {
  position: absolute;
  z-index: 4;
  right: 3%;
  top: 5%;
  width: 47%;
  height: 69%;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 24px;
  background: rgba(2, 18, 28, .92);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .4);
}
.graph-inset svg {
  width: 100%;
  height: 100%;
}
.graph-inset .axis,
.graph-plate .axis {
  fill: none;
  stroke: #effbfc;
  stroke-width: 5;
  stroke-linecap: round;
}
.graph-inset .grid,
.graph-plate .grid {
  fill: none;
  stroke: rgba(204, 231, 235, .22);
  stroke-width: 2;
}
.graph-inset .plot {
  fill: none;
  stroke: #79e9ef;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 800;
  animation: plotDraw 5s ease-in-out infinite;
}
.graph-inset circle {
  fill: #fff1a8;
  stroke: #ffad78;
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  animation: pointReveal 5s ease-in-out infinite;
}
.graph-inset text {
  fill: #dceff2;
  font-size: 21px;
  font-weight: 800;
}
@keyframes plotDraw {
  0%, 12% {
    stroke-dashoffset: 800;
  }
  45%, 100% {
    stroke-dashoffset: 0;
  }
}
@keyframes pointReveal {
  0%, 25% {
    transform: scale(0);
  }
  45%, 100% {
    transform: scale(1);
  }
}
.compare-divider {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 6%;
  bottom: 6%;
  width: 2px;
  background:
    linear-gradient(
      transparent,
      #fff 20% 80%,
      transparent);
}
.formula-overlay {
  position: absolute;
  z-index: 6;
  left: 5%;
  top: 8%;
  width: 43%;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 26px;
  background: rgba(2, 18, 28, .91);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .4);
}
.formula-overlay b,
.formula-overlay span,
.formula-overlay strong {
  display: block;
}
.formula-overlay b {
  color: white;
  font-size: 52px;
}
.formula-overlay span {
  margin-top: 17px;
  color: #d2e7eb;
  font-size: 25px;
  font-weight: 750;
}
.formula-overlay strong {
  margin-top: 9px;
  color: var(--accent);
  font-size: 40px;
}
.formula-overlay.speed {
  left: auto;
  right: 5%;
}
.arm-caption {
  position: absolute;
  z-index: 6;
  bottom: 11%;
  padding: 8px 14px;
  border-radius: 999px;
  color: #06202a;
  background: #e9f7f8;
  font-size: 17px;
  font-weight: 950;
}
.arm-caption.left {
  left: 27%;
}
.arm-caption.right {
  right: 20%;
}
.rule-ribbon,
.pulley-badge,
.speed-law {
  position: absolute;
  z-index: 7;
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 14px;
  color: #06202a;
  background: var(--accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
  font-size: 18px;
  font-weight: 850;
  white-space: nowrap;
}
.rule-ribbon {
  top: 4%;
}
.pulley-badge {
  top: 4%;
}
.speed-law {
  right: 3%;
  left: auto;
  bottom: 4%;
  transform: none;
  color: #f1fafb;
  background: rgba(2, 18, 28, .92);
  white-space: normal;
}
.plate-ramp .rule-ribbon,
.plate-conversion .rule-ribbon,
.plate-stopping .rule-ribbon {
  top: 4%;
  bottom: auto;
}
.plate-concept > img {
  filter: saturate(.55) contrast(1.05) brightness(.42);
  transform: scale(1.12);
}
.conversion-card {
  position: absolute;
  z-index: 6;
  top: 24%;
  width: 30%;
  height: 215px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 28px;
  background: rgba(2, 18, 28, .88);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .4);
}
.conversion-card.left {
  left: 5%;
}
.conversion-card.right {
  right: 5%;
}
.conversion-card b {
  font-size: 94px;
  line-height: .8;
}
.conversion-card span {
  color: var(--accent);
  font-size: 32px;
  font-weight: 900;
}
.conversion-operator {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  height: 205px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.conversion-operator b {
  padding: 7px 10px;
  border-radius: 9px;
  color: #071923;
  background: var(--accent);
  font-size: 17px;
}
.conversion-operator span {
  font-size: 37px;
}
.graph-plate {
  background:
    linear-gradient(
      145deg,
      #0c2938,
      #071821);
}
.graph-paper {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(158, 203, 212, .08) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(158, 203, 212, .08) 1px,
      transparent 1px);
  background-size: 40px 40px;
}
.graph-plate > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.graph-plate .plot {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 900;
  animation: plotDraw 5.5s ease-in-out infinite;
}
.graph-plate .plot.slow {
  stroke: #78e3ac;
}
.graph-plate .plot.fast {
  stroke: #f1c66e;
  animation-delay: .7s;
}
.graph-plate .plot.stop {
  stroke: #ff8d7b;
  animation-delay: 1.4s;
}
.graph-plate text {
  fill: #e6f2f4;
  font-size: 25px;
  font-weight: 900;
}
.stopping-scale {
  position: absolute;
  z-index: 5;
  left: 7%;
  right: 7%;
  bottom: 12%;
  height: 108px;
  display: grid;
  grid-template-columns: 3fr 5fr;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 35px rgba(0, 0, 0, .35);
}
.stopping-scale span {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #06202a;
}
.stopping-scale b {
  font-size: 18px;
}
.stopping-scale strong {
  font-size: 32px;
}
.stopping-scale .reaction {
  background: #f3cb75;
}
.stopping-scale .brake {
  background: #ff9484;
}
.plate-stopping .rule-ribbon {
  top: auto;
  bottom: 4%;
}
.concept-core {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  padding: 25px;
  border: 2px solid var(--accent);
  border-radius: 25px;
  color: #e9f6f8;
  background: rgba(2, 18, 28, .94);
  box-shadow: 0 0 45px rgba(var(--accent-rgb), .3);
  font-size: 19px;
  text-align: center;
}
.concept-core b {
  display: block;
  margin-top: 5px;
  font-size: 22px;
}
@keyframes dotPulse {
  50% {
    transform: scale(1.35);
    filter: brightness(1.35);
  }
}
@media (max-width: 1050px) {
  .premium-plate {
    max-width: 790px;
  }
  .plate-tag strong {
    font-size: 17px;
  }
  .plate-tag small {
    font-size: 15px;
  }
}
@media (max-width: 700px) {
  .premium-plate {
    aspect-ratio: 1.5;
    border-radius: 22px;
  }
  .plate-tag {
    min-width: 0;
    max-width: 44%;
    min-height: 46px;
    padding: 7px 9px;
    border-left-width: 4px;
  }
  .plate-tag strong {
    font-size: 15px;
  }
  .plate-tag small {
    display: none;
  }
  .plate-number {
    width: 26px;
    height: 26px;
    font-size: 14px !important;
  }
  .plate-tag.middle-center {
    top: 50%;
  }
  .plate-force-kinds .plate-tag {
    min-width: 0;
    max-width: 31%;
  }
  .graph-inset {
    right: 2%;
    top: 3%;
    width: 49%;
    height: 67%;
    padding: 7px;
  }
  .graph-inset text {
    font-size: 18px;
  }
  .unit-emblem {
    right: 4%;
    top: 7%;
    width: 170px;
    height: 170px;
    padding: 16px;
  }
  .unit-emblem b {
    font-size: 78px;
  }
  .unit-emblem strong {
    font-size: 42px;
  }
  .unit-emblem span {
    font-size: 16px;
  }
  .formula-overlay {
    padding: 14px;
  }
  .formula-overlay b {
    font-size: 30px;
  }
  .formula-overlay span {
    font-size: 17px;
  }
  .formula-overlay strong {
    font-size: 25px;
  }
  .rule-ribbon,
  .pulley-badge,
  .speed-law {
    max-width: 82%;
    padding: 7px 10px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }
  .conversion-card {
    height: 145px;
  }
  .conversion-card b {
    font-size: 58px;
  }
  .conversion-card span {
    font-size: 21px;
  }
  .conversion-operator {
    height: 145px;
  }
  .stopping-scale {
    height: 78px;
  }
  .stopping-scale b {
    font-size: 14px;
  }
  .stopping-scale strong {
    font-size: 21px;
  }
  .concept-core {
    width: 180px;
    padding: 13px;
    font-size: 14px;
  }
  .concept-core b {
    font-size: 16px;
  }
}

/* ../../sites/msl-mensch-und-gesundheit-7/app/health-visuals.css */
.start-screen::after {
  content: "O\2082  \2192  LUNGE \2192  BLUT \2192  HERZ \2192  K\d6RPERZELLEN";
}
.health-plate > img {
  filter: saturate(.96) contrast(1.04) brightness(.84);
}
.health-vectors {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.health-vectors path {
  fill: none;
  stroke-linecap: round;
}
.health-vectors marker path {
  fill: #73e7f1;
}
.health-vectors marker .red-head {
  fill: #ff8278;
}
.airflow,
.oxygen-flow,
.carbon-flow,
.blood-flow,
.valve-flow,
.rib-vector {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  marker-end: url(#flowArrow);
  filter: drop-shadow(0 0 10px currentColor);
  animation: healthFlow 5.5s ease-in-out infinite;
}
.airflow,
.oxygen-flow,
.rib-vector {
  color: #72e4ef;
  stroke: #72e4ef;
  stroke-width: 12;
}
.carbon-flow,
.valve-flow.red,
.blood-flow.red {
  color: #ff8278;
  stroke: #ff8278;
  stroke-width: 12;
  marker-end: url(#redArrow);
}
.blood-flow.blue {
  color: #70b9ff;
  stroke: #70b9ff;
  stroke-width: 11;
}
.valve-flow {
  color: #72d6ff;
  stroke: #72d6ff;
  stroke-width: 10;
}
.rib-vector {
  stroke-width: 15;
}
.airflow.out {
  animation-direction: reverse;
}
.diaphragm-motion {
  stroke: #ffb178;
  stroke-width: 12;
  stroke-dasharray: 12 10;
  animation: diaphragmMove 4s ease-in-out infinite;
}
.diaphragm-motion.up {
  animation-direction: reverse;
}
@keyframes healthFlow {
  0%, 12% {
    stroke-dashoffset: 900;
    opacity: .2;
  }
  46%, 84% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: .25;
  }
}
@keyframes diaphragmMove {
  50% {
    transform: translateY(36px);
  }
}
.system-link,
.bronchiole-scale,
.diffusion-badge,
.rib-badge,
.valve-rule,
.tissue-label {
  position: absolute;
  z-index: 7;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 92%;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 14px;
  color: #e7f4f6;
  background: rgba(2, 18, 28, .91);
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}
.system-link {
  bottom: 4%;
}
.system-link i {
  margin: 0 10px;
  color: var(--accent);
  font-size: 24px;
  font-style: normal;
}
.bronchiole-scale {
  top: 4%;
  color: #09212a;
  background: var(--accent);
}
.diffusion-badge,
.rib-badge,
.valve-rule,
.tissue-label {
  bottom: 4%;
}
.rib-badge b,
.valve-rule b,
.tissue-label b {
  color: var(--accent);
}
.area-badge {
  position: absolute;
  z-index: 7;
  right: 4%;
  bottom: 4%;
  padding: 14px 17px;
  display: grid;
  border-radius: 17px;
  color: #08212a;
  background: var(--accent);
  box-shadow: 0 15px 35px rgba(0, 0, 0, .35);
}
.area-badge b {
  font-size: 27px;
}
.area-badge span {
  font-size: 15px;
  font-weight: 850;
}
.alveoli-plate .bottom-left {
  bottom: 4%;
}
.pressure-compare {
  position: absolute;
  z-index: 7;
  inset: 8%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 15px;
}
.pressure-compare section {
  min-height: 240px;
  padding: 26px;
  display: grid;
  align-content: center;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 28px;
  background: rgba(2, 18, 28, .9);
  text-align: center;
}
.pressure-compare b {
  color: var(--accent);
  font-size: 22px;
}
.pressure-compare strong {
  font-size: 24px;
}
.pressure-compare span {
  color: #d2e6eb;
  font-size: 17px;
}
.pressure-compare > i {
  color: var(--accent);
  font-size: 44px;
  font-style: normal;
}
.breathing-plate.inhale > img {
  object-position: left center;
}
.breathing-plate.exhale > img {
  object-position: right center;
}
.breathing-plate {
  isolation: isolate;
}
.breathing-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      transparent 44%,
      rgba(2, 18, 28, .64) 50%,
      transparent 56%);
}
.journey-chain {
  position: absolute;
  z-index: 7;
  left: 3%;
  right: 3%;
  top: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.journey-chain span {
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 13px;
  color: #edf7f8;
  background: rgba(2, 18, 28, .9);
  font-size: 16px;
  font-weight: 900;
}
.journey-chain i {
  color: var(--accent);
  font-size: 24px;
  font-style: normal;
  animation: journeyPulse 2s ease-in-out infinite;
}
@keyframes journeyPulse {
  50% {
    transform: translateX(5px);
    filter: brightness(1.5);
  }
}
.plasma-card {
  position: absolute;
  z-index: 7;
  left: 5%;
  top: 7%;
  width: 390px;
  padding: 25px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 25px;
  background: rgba(2, 18, 28, .91);
}
.plasma-card b {
  color: var(--accent);
  font-size: 20px;
}
.plasma-card strong {
  font-size: 32px;
}
.plasma-card span {
  color: #d2e3e8;
  font-size: 17px;
  line-height: 1.4;
}
.blood-ratio {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 4%;
  transform: translateX(-50%);
  padding: 10px 15px;
  border-radius: 13px;
  color: #08212a;
  background: var(--accent);
  font-size: 17px;
  font-weight: 850;
}
.blood-ratio b {
  font-size: 20px;
}
.blood-plate:not(.plasma) .plate-tag {
  max-width: 260px;
}
.clotting-steps {
  position: absolute;
  z-index: 7;
  left: 3%;
  right: 3%;
  bottom: 4%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.clotting-steps span {
  min-height: 68px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 14px;
  color: #e8f4f6;
  background: rgba(2, 18, 28, .9);
  font-size: 15px;
  font-weight: 800;
  animation: stepFocus 8s ease-in-out infinite;
}
.clotting-steps span:nth-child(2) {
  animation-delay: 2s;
}
.clotting-steps span:nth-child(3) {
  animation-delay: 4s;
}
.clotting-steps span:nth-child(4) {
  animation-delay: 6s;
}
.clotting-steps b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: #08212a;
  background: var(--accent);
  font-size: 17px;
}
@keyframes stepFocus {
  0%, 18% {
    transform: translateY(-7px);
    border-color: var(--accent);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), .3);
  }
  28%, 100% {
    transform: none;
  }
}
.heart-position > img,
.heart-cutaway > img {
  filter: saturate(.96) contrast(1.05) brightness(.8);
}
.heart-position::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 49%;
  top: 46%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 128, 120, .8);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 128, 120, .45);
  animation: heartPulse 1.25s ease-in-out infinite;
}
@keyframes heartPulse {
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 0 18px rgba(255, 128, 120, 0);
  }
}
.septum-label {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  padding: 9px 13px;
  border-radius: 12px;
  color: #08212a;
  background: var(--accent);
  font-size: 17px;
  font-weight: 900;
}
.heart-cutaway.chambers .plate-tag {
  max-width: 235px;
}
.heart-cutaway.valves .plate-tag {
  max-width: 255px;
}
.cycle-steps {
  position: absolute;
  z-index: 7;
  left: 3%;
  right: 3%;
  bottom: 4%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.cycle-steps section {
  min-height: 88px;
  padding: 11px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 2px 9px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 15px;
  background: rgba(2, 18, 28, .91);
  animation: cycleFocus 6.6s ease-in-out infinite;
}
.cycle-steps section:nth-child(2) {
  animation-delay: 2.2s;
}
.cycle-steps section:nth-child(3) {
  animation-delay: 4.4s;
}
.cycle-steps b {
  grid-row: 1/3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #08212a;
  background: var(--accent);
  font-size: 17px;
}
.cycle-steps strong {
  font-size: 16px;
}
.cycle-steps span {
  color: #cde0e5;
  font-size: 15px;
}
.heartbeat-line {
  position: absolute;
  z-index: 6;
  left: 5%;
  right: 5%;
  top: 6%;
  height: 5px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent),
      transparent);
  filter: drop-shadow(0 0 10px var(--accent));
  animation: beatSweep 1.3s ease-in-out infinite;
}
@keyframes cycleFocus {
  0%, 24% {
    transform: translateY(-8px);
    border-color: var(--accent);
  }
  34%, 100% {
    transform: none;
  }
}
@keyframes beatSweep {
  50% {
    transform: scaleX(.65);
    filter: brightness(1.5) drop-shadow(0 0 16px var(--accent));
  }
}
.vessels-plate .plate-tag {
  min-width: 0;
  max-width: 29%;
}
.vessels-plate .bottom-left {
  left: 2%;
}
.vessels-plate .bottom-right {
  right: 2%;
}
.circulation-plate.pulmonary > img {
  filter: saturate(.55) brightness(.5);
}
.circulation-plate.systemic > img {
  filter: saturate(.55) brightness(.5);
}
.loop-focus,
.loop-label {
  position: absolute;
  z-index: 7;
  padding: 12px 16px;
  border-radius: 15px;
  color: #eaf5f7;
  background: rgba(2, 18, 28, .92);
  font-size: 16px;
  text-align: center;
}
.loop-focus {
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  color: #08212a;
  background: var(--accent);
  font-weight: 950;
}
.loop-label.lung {
  left: 3%;
  top: 4%;
}
.loop-label.body {
  right: 3%;
  top: 4%;
}
.loop-label b {
  display: block;
  margin-top: 5px;
  color: var(--accent);
  font-size: 17px;
}
.circulation-plate .plate-tag {
  max-width: 250px;
}
.health-life .plate-tag {
  max-width: 28%;
  min-width: 0;
}
.health-life .top-left {
  left: 2%;
}
.health-life .top-right {
  right: 2%;
}
.health-life .bottom-right {
  right: 2%;
}
.health-life.risk > img {
  filter: saturate(.8) brightness(.65);
}
.health-life.good > img {
  filter: saturate(1.03) brightness(.83);
}
.concept-plate > img {
  filter: saturate(.5) brightness(.33);
}
.concept-chain {
  position: absolute;
  z-index: 8;
  left: 4%;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.concept-chain span {
  min-width: 165px;
  padding: 17px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 9px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 18px;
  color: #fff;
  background: rgba(2, 18, 28, .92);
  font-size: 17px;
  font-weight: 900;
}
.concept-chain b {
  grid-row: 1/3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #08212a;
  background: var(--accent);
}
.concept-chain small {
  font-size: 15px;
  color: #c7dce2;
  font-weight: 700;
}
.concept-chain > i {
  color: var(--accent);
  font-size: 27px;
  font-style: normal;
  animation: journeyPulse 2s ease-in-out infinite;
}
@media (max-width: 700px) {
  .health-plate .plate-tag {
    min-width: 0;
    max-width: 44%;
    padding: 7px 8px;
  }
  .health-plate .plate-tag strong {
    font-size: 15px;
  }
  .health-plate .plate-tag small {
    display: none;
  }
  .system-link,
  .bronchiole-scale,
  .diffusion-badge,
  .rib-badge,
  .valve-rule,
  .tissue-label {
    font-size: 15px;
  }
  .area-badge {
    padding: 8px;
  }
  .area-badge b {
    font-size: 20px;
  }
  .pressure-compare {
    gap: 5px;
  }
  .pressure-compare section {
    min-height: 150px;
    padding: 10px;
    gap: 8px;
  }
  .pressure-compare b,
  .pressure-compare strong,
  .pressure-compare span {
    font-size: 15px;
  }
  .pressure-compare > i {
    font-size: 25px;
  }
  .journey-chain {
    gap: 3px;
    flex-wrap: wrap;
  }
  .journey-chain span {
    padding: 5px 7px;
    font-size: 15px;
  }
  .plasma-card {
    width: 250px;
    padding: 13px;
  }
  .plasma-card b,
  .plasma-card span {
    font-size: 15px;
  }
  .plasma-card strong {
    font-size: 23px;
  }
  .clotting-steps {
    gap: 3px;
  }
  .clotting-steps span {
    min-height: 54px;
    padding: 5px;
    font-size: 15px;
  }
  .clotting-steps b {
    display: none;
  }
  .cycle-steps {
    gap: 3px;
  }
  .cycle-steps section {
    min-height: 62px;
    padding: 6px;
  }
  .cycle-steps b {
    display: none;
  }
  .cycle-steps strong,
  .cycle-steps span {
    font-size: 15px;
  }
  .concept-chain {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .concept-chain > i {
    display: none;
  }
  .concept-chain span {
    min-width: 0;
    padding: 9px;
    font-size: 15px;
  }
  .concept-chain small {
    font-size: 15px;
  }
}

/* health7-standalone-styles.css */