/* Sinapsis is scoped to its own page so the shared AI shell keeps its identity. */
.cm-sinapsis-page {
  --snp-bg: #081422;
  --snp-surface: #102235;
  --snp-line: #20394c;
  --snp-muted: #9db2c3;
  --snp-text: #eef7fb;
  --snp-accent: #48ded2;
  background: var(--snp-bg);
  color: var(--snp-text);
  margin: 0;
  font:
    15px/1.6 Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color-scheme: dark;
}
.cm-sinapsis-page * {
  box-sizing: border-box;
}
.cm-sinapsis-page [hidden] {
  display: none !important;
}
.cm-sinapsis-page button,
.cm-sinapsis-page input,
.cm-sinapsis-page select {
  font: inherit;
}
.cm-sinapsis-page button {
  cursor: pointer;
}
.cm-sinapsis-page button:disabled {
  cursor: default;
  opacity: 0.5;
}
.cm-sinapsis-page button:focus-visible,
.cm-sinapsis-page a:focus-visible,
.cm-sinapsis-page input:focus-visible {
  outline: 3px solid #79f7e8;
  outline-offset: 5px;
}
.cm-sinapsis-page a {
  color: inherit;
}
.cm-sinapsis-page h1,
.cm-sinapsis-page h2,
.cm-sinapsis-page h3,
.cm-sinapsis-page p {
  margin-top: 0;
}
.snp-layout {
  display: flex;
  min-height: 100vh;
}
.snp-main {
  flex: 1;
  min-width: 0;
}
/* Same header hierarchy and treatment as Anatomy / Auscultation / ECG. */
.snp-header {
  position: sticky;
  top: 0;
  z-index: 1200;
  min-height: 88px;
  padding: 16px 24px;
  border-bottom: 1px solid #ffffff14;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
}
.admin-bar .snp-header {
  top: 32px;
}
.snp-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.snp-brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  text-decoration: none;
}
.snp-brand small {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #99a9bd;
}
.snp-brand strong {
  font-size: 20px;
  line-height: 1.4;
  background: linear-gradient(90deg, #60a5fa, #06b6d4, #a855f7);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.snp-menu {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--snp-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #d6e6f1;
  font-size: 20px !important;
  line-height: 1.1;
}
.snp-menu:hover {
  background: #1b344c;
  border-color: #46718b;
}
.snp-learning-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--snp-line);
  background: #0b1b2b;
}
.snp-learning-label {
  color: var(--snp-muted);
  font-size: 12px;
}
.snp-learning-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
}
.snp-learning-bar [data-sound] {
  width: 44px;
  height: 44px;
}
.snp-icon-button {
  background: transparent;
  border: 1px solid #284155;
  border-radius: 11px;
  color: #ccdde9;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-size: 20px !important;
}
.snp-icon-button:hover {
  background: #173247;
}
.snp-streak {
  color: #ffc98c;
  font-size: 13px;
}
.snp-xp {
  color: #73e6db;
  font-size: 13px;
}
.snp-home {
  max-width: 1260px;
  margin: auto;
  padding: 24px 40px 0;
}
.snp-crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #8ea7bd;
  margin: 0 0 24px;
  flex-wrap: wrap;
}
.snp-crumb button {
  border: 0;
  background: none;
  color: #a8bdce;
  padding: 0;
}
.snp-crumb strong {
  font-weight: 500;
  color: #d8e7f2;
}
.snp-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  min-height: 367px;
  padding: 34px 40px;
  border: 1px solid #265364;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 50%, #16485199, transparent 60%),
    linear-gradient(120deg, #102839, #0c202f 65%);
}
.snp-eyebrow {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 2px;
  color: #81b0bd;
  margin-bottom: 13px;
}
.snp-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #49e5ca;
  box-shadow: 0 0 12px #49e5ca;
  margin-right: 7px;
}
.snp-hero h1 {
  font-size: clamp(36px, 4vw, 57px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 15px;
}
.snp-hero h1 span {
  color: #7bf0de;
}
.snp-hero-description {
  font-size: 14px;
  line-height: 1.7;
  color: #b4c9d5;
  margin-bottom: 17px;
}
.snp-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 22px;
}
.snp-hero-tags span {
  font-size: 10px;
  background: #163642;
  border: 1px solid #29525b;
  border-radius: 6px;
  padding: 3px 9px;
  color: #b9d9df;
}
.snp-primary {
  border: 0;
  border-bottom: 3px solid #209f9c;
  background: #55e1ce;
  color: #062a30;
  border-radius: 11px;
  min-height: 47px;
  padding: 11px 24px;
  font-weight: 800 !important;
  font-size: 13px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 27px;
  transition:
    transform 0.18s,
    background 0.18s;
}
.snp-primary:hover {
  background: #88f5e4;
  transform: translateY(-2px);
}
.snp-primary:active {
  transform: translateY(1px);
}
.snp-primary:disabled {
  background: #254451;
  color: #a2b9c9;
  border-color: #203441;
  transform: none;
}
.snp-save-state {
  font-size: 10px;
  color: #96b7c1;
  margin: 10px 0 0;
  max-width: 370px;
}
.snp-hero-art {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 350px;
  aspect-ratio: 1;
}
.snp-hero-art > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 23px #0005);
  animation: snp-float 5s ease-in-out infinite;
}
.snp-orbit {
  border: 1px solid #45838455;
  border-radius: 50%;
  position: absolute;
  inset: 5%;
  transform: rotate(-25deg);
}
.snp-orbit-two {
  inset: 16% -8%;
  transform: rotate(30deg);
}
.snp-orbit:after {
  content: "";
  position: absolute;
  top: 20%;
  right: 9%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7ef4d9;
  box-shadow: 0 0 18px #60ded1;
}
.snp-art-label {
  position: absolute;
  font-size: 8px;
  letter-spacing: 1.7px;
  line-height: 1.7;
  color: #9bd2d3;
  z-index: 1;
}
.snp-art-label-top {
  top: 6%;
  right: 0;
}
.snp-art-label-bottom {
  bottom: 1%;
  right: 0;
}
.snp-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 267px;
  gap: 34px;
  margin-top: 35px;
}
.snp-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  gap: 15px;
}
.snp-section-heading h2 {
  font-size: 23px;
  letter-spacing: -0.65px;
  line-height: 1.2;
  margin: 0;
}
.snp-section-heading .snp-eyebrow {
  font-size: 8px;
  letter-spacing: 1.6px;
  margin-bottom: 7px;
}
.snp-route-counter {
  font-size: 10px;
  color: #aac7d6;
  border: 1px solid #2b4357;
  border-radius: 20px;
  padding: 4px 11px;
}
/* Circular route and in-map lesson card from the original Sinapsis map. */
.snp-path {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  padding: 12px 0 65px;
  background:
    radial-gradient(ellipse at 45% 8%, #00315744, transparent 45%),
    linear-gradient(180deg, #03142170, #020b13aa);
  border-radius: 18px;
}
.snp-path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% - 65px);
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}
.snp-track,
.snp-track-done,
.snp-track-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.snp-track {
  stroke: url(#snp-route-track);
  stroke-width: 9;
}
.snp-track-done {
  stroke: #27baff;
  stroke-width: 7;
  filter: drop-shadow(0 0 7px #22b8ff88);
}
.snp-track-pulse {
  stroke: #b4f5ff;
  stroke-width: 1.5;
  stroke-dasharray: 0.4 46 7 118 0.4 164;
  opacity: 0.55;
  filter: drop-shadow(0 0 4px #4ad2ff);
  animation: snp-route-flow 12s linear infinite;
}
.snp-neural-branch {
  fill: none;
  stroke: #247eab;
  stroke-width: 0.8;
  opacity: 0.055;
}
.snp-node-row {
  --node-size: 86px;
  --card-width: clamp(165px, 47%, 280px);
  --card-gap: 62px;
  position: relative;
  height: 170px;
}
.snp-node-row.is-focused {
  height: 255px;
}
.snp-node-button {
  position: absolute;
  left: var(--node-x);
  top: 50%;
  width: var(--node-size);
  height: var(--node-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #42c8ff;
  transform: translate(-50%, -50%);
  z-index: 1;
  isolation: isolate;
  transition: filter 0.2s;
}
.snp-node-button:hover {
  filter: brightness(1.22);
}
.snp-node-plate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid #64b9ff66;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 46%,
    #09233ff5 0 46%,
    #0a2139c7 60%,
    #0b213738 76%,
    transparent 78%
  );
  box-shadow:
    inset 0 0 20px #2fb0ff2e,
    0 0 24px #2da9ff28;
}
.snp-node-icon {
  display: grid;
  place-items: center;
  width: 58%;
  height: 58%;
  border-radius: 50%;
}
.snp-node-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px #43caff88);
}
.snp-node-icon.is-book svg {
  fill: currentColor;
  stroke-width: 1;
}
.snp-node-button.is-locked {
  color: #a0bacccc;
}
.is-locked .snp-node-plate {
  border-color: #7199b93d;
  background: radial-gradient(circle, #102031e6, #14283b85 62%, #0f22371f 78%);
  box-shadow: none;
}
.is-locked .snp-node-icon {
  background: #8299ac26;
}
.is-locked .snp-node-icon svg {
  filter: none;
  width: 29px;
  height: 29px;
}
.snp-node-status {
  position: absolute;
  right: 0;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #051725;
  border-radius: 50%;
  background: #18c879;
  color: #fff;
  box-shadow: 0 0 16px #18c87933;
}
.snp-node-status svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.snp-node-status.is-lock {
  background: #374452;
  color: #ecf3f9;
  box-shadow: none;
}
.snp-node-status.is-lock svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}
.is-focused .snp-node-button {
  --node-size: 126px;
}
.is-focused .snp-node-plate {
  border: 1px solid #89e9ffe6;
  background: radial-gradient(circle, #0b3048 35%, #0b3452aa 70%, #16466688);
  box-shadow:
    inset 0 0 26px #50cdff42,
    0 0 22px #5ad6ffc7,
    0 0 58px #1c9aff7a;
}
.is-focused .snp-node-plate:before,
.is-focused .snp-node-plate:after {
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.is-focused .snp-node-plate:before {
  border: 1px solid #75e4ffd1;
  background: radial-gradient(
    circle,
    transparent 56%,
    #33c1ff30 76%,
    transparent 80%
  );
  box-shadow:
    0 0 18px #7ae8ffc7,
    0 0 46px #117eff7a,
    inset 0 0 30px #2fbeff2e;
  animation: snp-circle-glow 2.6s ease-in-out infinite;
}
.is-focused .snp-node-plate:after {
  inset: -28px;
  background: conic-gradient(
    from 25deg,
    transparent 0 22%,
    #a2f9ffd6 25%,
    transparent 31% 56%,
    #2cb0ffa8 61%,
    transparent 67% 100%
  );
  mask: radial-gradient(
    circle,
    transparent 0 56%,
    #000 57% 60%,
    transparent 61%
  );
  animation: snp-circle-orbit 6s linear infinite;
  opacity: 0.65;
}
.is-focused .snp-node-icon svg {
  width: 48px;
  height: 48px;
  color: #aaf5ff;
}
.snp-node-copy {
  position: absolute;
  top: 50%;
  left: calc(var(--node-x) + var(--node-size) / 2 + 16px);
  width: min(215px, calc(100% - var(--node-x) - var(--node-size) / 2 - 26px));
  transform: translateY(-50%);
}
.has-label-left .snp-node-copy {
  left: auto;
  right: calc(100% - var(--node-x) + var(--node-size) / 2 + 16px);
  width: min(215px, calc(var(--node-x) - var(--node-size) / 2 - 26px));
  text-align: right;
}
.snp-node-copy h3 {
  margin: 0;
  color: #f1f7ff;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.15px;
}
.snp-node-copy p {
  margin: 8px 0 0;
  color: #a7bacbb3;
  font-size: 14px;
  font-weight: 700;
}
.is-done .snp-node-copy p {
  color: #7de6cf;
}
.is-current .snp-node-copy p {
  color: #8bdcff;
}
.snp-active-card {
  position: absolute;
  top: 50%;
  left: clamp(
    10px,
    calc(var(--node-x) + var(--card-gap)),
    calc(100% - var(--card-width) - 10px)
  );
  transform: translateY(-50%);
  z-index: 3;
  width: var(--card-width);
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid #3db3ff9e;
  border-radius: 9px;
  background: linear-gradient(135deg, #0c2a46ed, #04111fed), #061424;
  box-shadow:
    0 0 26px #1597ff22,
    inset 0 1px 0 #91e1ff29;
}
.has-label-left .snp-active-card {
  left: auto;
  right: clamp(
    10px,
    calc(100% - var(--node-x) + var(--card-gap)),
    calc(100% - var(--card-width) - 10px)
  );
}
.snp-active-card h3 {
  margin: 0;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}
.snp-active-card p {
  margin: 8px 0 14px;
  color: #b9cbda;
  font-size: 14px;
  font-weight: 700;
}
.snp-active-progress {
  height: 6px;
  border-radius: 10px;
  background: #1d3852c7;
  overflow: hidden;
}
.snp-active-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #28b7ff, #1378ff);
}
.snp-active-card > strong {
  display: block;
  margin-top: 6px;
  color: #b9cbda;
  font-size: 13px;
}
.snp-active-card button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #208fff, #0759ff);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 #ffffff55,
    0 8px 20px #0c57ff22;
}
.snp-active-card button:hover {
  filter: brightness(1.15);
}
.snp-active-card button > span {
  font-size: 24px;
  line-height: 1;
}
.snp-active-card small {
  display: block;
  margin-top: 10px;
  color: #8cabc4;
  font-size: 12px;
  font-weight: 700;
}
@keyframes snp-circle-glow {
  50% {
    opacity: 0.65;
    transform: scale(1.04);
  }
}
@keyframes snp-circle-orbit {
  to {
    transform: rotate(360deg);
  }
}
@container (max-width: 560px) {
  .snp-node-row {
    --node-size: 74px;
    --card-width: clamp(172px, 52%, 245px);
    --card-gap: 22px;
    height: 150px;
  }
  .snp-node-row.is-focused {
    height: 260px;
  }
  .is-focused .snp-node-button {
    --node-size: 100px;
  }
  .snp-node-copy {
    left: calc(var(--node-x) + 47px);
    width: calc(100% - var(--node-x) - 57px);
  }
  .has-label-left .snp-node-copy {
    right: calc(100% - var(--node-x) + 47px);
    width: calc(var(--node-x) - 57px);
  }
  .snp-node-copy h3 {
    font-size: 15px;
  }
  .snp-node-copy p {
    font-size: 13px;
  }
  .snp-active-card {
    padding: 12px;
  }
  .snp-active-card h3 {
    font-size: 16px;
  }
  .snp-active-card p {
    margin: 6px 0 11px;
    font-size: 12px;
  }
  .snp-active-card button {
    padding: 9px;
    font-size: 12px;
    min-height: 42px;
  }
  .snp-active-card > strong,
  .snp-active-card small {
    font-size: 11px;
  }
  .snp-track {
    stroke-width: 8;
  }
  .snp-track-done {
    stroke-width: 6;
  }
}
.snp-route-end {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15px;
  color: #85a2b6;
  font-size: 11px;
  gap: 4px;
}
.snp-route-end > span:first-child {
  font-size: 37px;
  color: #7b8fc0;
}
.snp-route-end strong {
  font-size: 13px;
  color: #b4cbd6;
}
.snp-rail > section {
  border: 1px solid #213d4e;
  border-radius: 17px;
  padding: 23px;
  margin-bottom: 18px;
  background: #0d1e2e;
}
.snp-progress-card h2 {
  font-size: 18px;
  margin: 0;
}
.snp-progress-card .snp-eyebrow {
  font-size: 8px;
  letter-spacing: 1.4px;
  margin-bottom: 5px;
}
.snp-ring {
  --progress: 0%;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: conic-gradient(#63e7d1 var(--progress), #1b3748 0);
  padding: 7px;
  margin: 23px auto;
}
.snp-ring > div {
  border-radius: 50%;
  background: #0d1e2e;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.snp-ring strong {
  font-size: 29px;
  line-height: 1.2;
  color: #80ead8;
}
.snp-ring span {
  font-size: 9px;
  color: #8ea7bb;
  margin-top: 3px;
}
.snp-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  padding: 9px 0;
  gap: 8px;
  color: #8da9bc;
  border-top: 1px solid #1a3445;
}
.snp-stat-row strong {
  color: #cee5ea;
  white-space: nowrap;
}
.snp-mini-progress {
  height: 4px;
  border-radius: 5px;
  background: #1e3747;
  overflow: hidden;
  margin-top: 10px;
}
.snp-mini-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: #61dece;
  transition: width 0.5s;
}
.snp-rail .snp-coach {
  background: linear-gradient(135deg, #143139, #102232);
  padding: 17px 19px 20px;
}
.snp-coach > img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
  margin: -5px auto 10px;
}
.snp-coach h3 {
  font-size: 13px;
  line-height: 1.5;
  color: #d8f3e9;
}
.snp-coach p,
.snp-review-card p,
.snp-source-card p {
  font-size: 11px;
  color: #8faebc;
  line-height: 1.8;
  margin-bottom: 13px;
}
.snp-card-icon {
  font-size: 29px;
  color: #b3a4ed;
}
.snp-review-card h3 {
  font-size: 14px;
  margin-bottom: 8px;
}
.snp-secondary {
  border: 1px solid #315568;
  background: #132d3b;
  color: #b9e8e4;
  border-radius: 9px;
  padding: 9px 13px;
  font-size: 11px !important;
  font-weight: 650 !important;
}
.snp-secondary:hover {
  background: #20434e;
}
.snp-rail .snp-source-card {
  background: none;
  border: 0;
  padding: 4px 6px;
}
.snp-source-card a {
  font-size: 12px;
  text-decoration: none;
  color: #b6d8e5;
  font-weight: 600;
}
.snp-source-card p {
  font-size: 10px;
  margin: 10px 0;
}
.snp-text-button {
  border: 0;
  background: none;
  color: #7cdccc;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 10px !important;
}
.snp-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid #1b3243;
  padding: 22px 0;
  color: #7593a5;
  font-size: 9px;
}
.snp-lesson {
  max-width: 840px;
  padding: 27px 32px 45px;
  margin: auto;
  min-height: calc(100vh - 80px);
}
.snp-lesson-top {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
.snp-lesson-top > span {
  font-size: 11px;
  white-space: nowrap;
  color: #91b1c3;
}
.snp-lesson-progress {
  height: 8px;
  background: #1c3447;
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
}
.snp-lesson-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #24bcb3, #8bf1c9);
  border-radius: 20px;
  transition: width 0.4s;
}
.snp-lesson-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #83bcbe;
  margin-bottom: 15px;
}
.snp-lesson > h1 {
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.8px;
  margin-bottom: 24px;
}
.snp-activity {
  min-height: 340px;
}
.snp-activity p {
  color: #b4cbd8;
  font-size: 15px;
  line-height: 1.9;
}
.snp-learn {
  display: grid;
  grid-template-columns: 1fr 230px;
  align-items: center;
  gap: 25px;
  padding: 24px;
  background: linear-gradient(140deg, #132c3b, #0e2031);
  border: 1px solid #274555;
  border-radius: 20px;
}
.snp-learn img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px #020b1380);
}
.snp-learn p {
  margin: 0;
}
.snp-takeaway {
  border-left: 3px solid #5bd5c7;
  padding: 12px 16px;
  background: #143238;
  color: #b3e5d9;
  margin-top: 20px;
  font-size: 12px;
}
.snp-options {
  display: grid;
  gap: 12px;
}
.snp-option {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 15px;
  min-height: 62px;
  padding: 15px 18px;
  background: #102538;
  border: 2px solid #253f52;
  border-radius: 13px;
  color: #d7e7f0;
  font-size: 14px !important;
  transition:
    border-color 0.18s,
    background 0.18s;
}
.snp-option > span:first-child {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border: 1px solid #466276;
  border-radius: 7px;
  font-size: 11px;
  color: #92b2c8;
}
.snp-option.is-selected {
  background: #143d45;
  border-color: #5edfcc;
}
.snp-option.is-correct {
  background: #143c33;
  border-color: #65d5a6;
}
.snp-option.is-wrong {
  background: #3d252f;
  border-color: #e38696;
}
.snp-options [disabled] {
  opacity: 1;
}
.snp-feedback {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  padding: 18px;
  border-radius: 14px;
  background: #13382f;
  border: 1px solid #30735d;
  color: #c0efdb;
  font-size: 13px;
}
.snp-feedback.is-wrong {
  background: #392932;
  border-color: #7f4e60;
  color: #f1ccd4;
}
.snp-feedback img {
  width: 63px;
  height: 63px;
  object-fit: contain;
  flex: 0 0 63px;
}
.snp-feedback strong {
  display: block;
  margin-bottom: 5px;
}
.snp-lesson-actions {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  border-top: 1px solid #27404f;
  margin-top: 27px;
  padding-top: 20px;
}
.snp-lesson-actions > span {
  font-size: 10px;
  line-height: 1.6;
  color: #8ea9bc;
  max-width: 280px;
}
.snp-order-list {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.snp-order-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #102637;
  border: 1px solid #2a4759;
  border-radius: 12px;
  padding: 12px 15px;
  min-height: 60px;
}
.snp-order-item > span:first-child {
  color: #5bddca;
  font-size: 12px;
}
.snp-order-item > strong {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}
.snp-order-controls {
  display: flex;
  gap: 5px;
}
.snp-order-controls button {
  width: 32px;
  height: 32px;
  border: 1px solid #34596b;
  border-radius: 6px;
  background: #173749;
  color: #bfdee5;
  padding: 0;
}
.snp-match-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 12px;
}
.snp-match-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.snp-match-item {
  min-height: 78px;
  padding: 15px 12px;
  text-align: left;
  background: #13293a;
  border: 2px solid #2b455a;
  border-radius: 12px;
  color: #d6e9f0;
  font-size: 12px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.snp-match-item.is-selected {
  border-color: #7ddece;
  background: #19414a;
}
.snp-match-item.is-paired {
  border-color: var(--pair-color);
  background: color-mix(in srgb, var(--pair-color) 12%, #0d1d2a);
}
.snp-match-item small {
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  font-size: 10px;
}
.snp-interactive {
  border: 1px solid #2b5363;
  border-radius: 19px;
  background: #0c2232;
  padding: 22px;
}
.snp-segmented {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.snp-segmented button {
  border: 1px solid #2f5368;
  border-radius: 9px;
  color: #accbdc;
  background: #132d41;
  padding: 9px 17px;
  font-size: 12px !important;
}
.snp-segmented button[aria-pressed="true"] {
  background: #25554e;
  border-color: #5bdac7;
  color: #c9fff0;
}
.snp-filter-scene {
  height: 235px;
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(180deg, #48304666 0 46%, #123853 54% 100%);
}
.snp-filter-label {
  position: absolute;
  left: 15px;
  font-size: 10px;
  color: #ccdbe6;
  letter-spacing: 1px;
  z-index: 2;
}
.snp-filter-label.top {
  top: 12px;
}
.snp-filter-label.bottom {
  bottom: 12px;
}
.snp-filter-wall {
  position: absolute;
  top: 46%;
  left: 0;
  width: 100%;
  height: 20px;
  background: repeating-linear-gradient(
    90deg,
    #68c9c7 0 26px,
    transparent 26px 30px
  );
  border-top: 4px solid #bd94d2;
  border-bottom: 4px solid #818acf;
  transition: all 0.5s;
}
.is-damaged .snp-filter-wall {
  background: repeating-linear-gradient(
    90deg,
    #ce96ae 0 20px,
    transparent 20px 57px
  );
}
.snp-particle {
  position: absolute;
  left: var(--x);
  top: 37px;
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  background: var(--color);
  animation: snp-solute 3.4s linear infinite;
  animation-delay: var(--delay);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color) 50%, transparent);
}
.snp-particle.albumin {
  animation-name: snp-albumin;
}
.is-damaged .snp-particle.albumin {
  animation-name: snp-solute;
}
.snp-legend {
  display: flex;
  gap: 20px;
  margin: 12px 0 0;
  font-size: 10px;
  color: #a9c4d2;
}
.snp-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  background: #76dbdf;
}
.snp-legend i.gold {
  background: #f1c461;
}
.snp-model-description {
  font-size: 13px !important;
  margin: 18px 0 0 !important;
  min-height: 76px;
}
.snp-flow {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.snp-flow > div {
  flex: 1;
  padding: 22px 12px;
  border: 1px solid #345866;
  border-radius: 11px;
  text-align: center;
  color: #d2e4e7;
  background: #143242;
  font-size: 12px;
}
.snp-flow > span {
  align-self: center;
  color: #61d9c7;
}
.snp-flow b {
  display: block;
  font-size: 27px;
  color: #7de4d5;
  font-weight: 500;
  margin-bottom: 8px;
}
.snp-note {
  font-size: 11px !important;
  color: #83a5b8 !important;
  margin-bottom: 18px;
}
.snp-origin {
  font-size: 10px;
  color: #90cdc4;
  margin-bottom: 17px;
  border-left: 2px solid #56bdae;
  padding-left: 12px;
}
.snp-studio {
  aspect-ratio: 16/8;
  position: relative;
  overflow: hidden;
  border-radius: 19px;
  background: #0d1934 url("images/podcast-studio-bg.webp") center/cover;
  border: 1px solid #294769;
  isolation: isolate;
}
.snp-studio:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#06102044, transparent 60%, #040b1933);
}
.snp-studio-label {
  position: absolute;
  left: 18px;
  top: 15px;
  z-index: 5;
  padding: 3px 8px;
  border: 1px solid #b4808655;
  border-radius: 5px;
  background: #211a2acc;
  color: #d3a1ad;
  font-size: 9px;
  letter-spacing: 1px;
}
.snp-studio.is-playing .snp-studio-label {
  color: #bff7d8;
  border-color: #639781;
  background: #173834;
}
.snp-host {
  position: absolute;
  width: 30%;
  height: 85%;
  bottom: -6%;
  transition:
    filter 0.25s,
    opacity 0.25s;
  filter: brightness(0.72);
  z-index: 2;
}
.snp-host.brain {
  left: 13%;
}
.snp-host.heart {
  right: 12%;
}
.snp-host img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  inset: 0;
}
.snp-host .talk {
  opacity: 0;
}
.snp-host.is-active {
  filter: brightness(1);
}
.snp-host.is-talking .talk {
  opacity: 1;
}
.snp-host.is-talking .listen {
  opacity: 0;
}
.snp-host.is-talking {
  transform: translateY(calc(var(--voice, 0) * -3px))
    rotate(calc(var(--voice, 0) * 1deg));
}
.snp-studio-desk {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -10%;
  z-index: 3;
  height: 44%;
  object-fit: fill;
}
.snp-mic {
  position: absolute;
  bottom: 1%;
  width: 16%;
  height: 44%;
  object-fit: contain;
  z-index: 4;
}
.snp-mic.one {
  left: 30%;
}
.snp-mic.two {
  right: 28%;
}
.snp-podcast-caption {
  padding: 20px;
  background: #102b3a;
  border: 1px solid #274855;
  border-radius: 13px;
  margin-top: 15px;
  min-height: 125px;
}
.snp-podcast-caption strong {
  display: block;
  color: #78e4cc;
  font-size: 11px;
  margin-bottom: 6px;
}
.snp-podcast-caption p {
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}
.snp-podcast-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 12px;
}
.snp-podcast-controls button {
  width: 40px;
  height: 40px;
  color: #c5e6e7;
  border: 1px solid #315467;
  border-radius: 10px;
  background: #173648;
  font-size: 13px;
}
.snp-podcast-controls .snp-play {
  width: 50px;
  background: #67dec9;
  color: #113f3d;
  font-size: 19px;
}
.snp-podcast-controls input {
  min-width: 70px;
  flex: 1;
  accent-color: #5edcca;
}
.snp-podcast-time {
  font-size: 10px;
  color: #aac7d4;
  min-width: 70px;
}
.snp-podcast-controls select {
  font-size: 10px;
  border: 1px solid #315467;
  background: #112d3f;
  border-radius: 8px;
  padding: 8px;
  color: #d0e6ed;
}
.snp-podcast-chapters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.snp-podcast-chapters button {
  font-size: 10px;
  border: 1px solid #2b455a;
  background: #102538;
  color: #9ebdce;
  border-radius: 7px;
  padding: 5px 9px;
}
.snp-podcast-chapters button.is-current {
  border-color: #5ed9c7;
  color: #bbf2e5;
}
.snp-transcript {
  border-top: 1px solid #234153;
  padding-top: 12px;
  margin-top: 18px;
  font-size: 11px;
  color: #a6c2d1;
}
.snp-transcript summary {
  cursor: pointer;
  color: #7ddfce;
}
.snp-transcript p {
  font-size: 12px;
  margin-top: 12px;
}
.snp-audio-error {
  background: #3d2c28;
  color: #f0d1bc;
  padding: 12px;
  border-radius: 8px;
  font-size: 12px;
  margin: 10px 0;
}
.snp-audio-error button {
  display: block;
  margin-top: 8px;
}
.snp-dialog {
  color: #ecf8fb;
  background: #102335;
  border: 1px solid #36576a;
  border-radius: 23px;
  padding: 36px;
  max-width: 540px;
  width: calc(100% - 36px);
  box-shadow: 0 30px 120px #0009;
  max-height: 85vh;
  overflow: auto;
}
.snp-dialog::backdrop {
  background: #020a16cc;
  backdrop-filter: blur(5px);
}
.snp-dialog-close {
  position: absolute;
  right: 15px;
  top: 15px;
}
.snp-dialog h2 {
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: -0.6px;
  margin: 5px 0 14px;
}
.snp-dialog p {
  color: #a8c5d4;
  font-size: 13px;
  line-height: 1.9;
}
.snp-dialog-art {
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
  margin: 0 auto 15px;
}
.snp-dialog .snp-primary {
  width: 100%;
  margin-top: 15px;
}
.snp-modal-tags {
  display: flex;
  gap: 8px;
  margin: 20px 0;
  font-size: 11px;
  color: #a0d8d2;
}
.snp-modal-tags > span {
  border: 1px solid #315663;
  border-radius: 7px;
  padding: 5px 10px;
}
.snp-modal-list {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.snp-modal-list button,
.snp-modal-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  border: 1px solid #2d4a5e;
  border-radius: 10px;
  background: #153044;
  color: #cde4ec;
  font-size: 12px;
  text-decoration: none;
}
.snp-complete {
  text-align: center;
}
.snp-complete strong.snp-earned {
  font-size: 29px;
  color: #7ce3ca;
  display: block;
  margin: 17px 0;
}
.snp-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100500;
  overflow: hidden;
}
.snp-confetti i {
  position: absolute;
  left: var(--x);
  top: -20px;
  width: 8px;
  height: 14px;
  background: var(--color);
  animation: snp-confetti 2.6s ease-out forwards;
  animation-delay: var(--delay);
}
.snp-toast {
  pointer-events: none;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 30px);
  padding: 12px 20px;
  border-radius: 13px;
  border: 1px solid #486378;
  background: #1a3348;
  color: #e5f2f7;
  font-size: 12px;
  z-index: 100400;
  box-shadow: 0 12px 40px #0008;
}
.snp-noscript {
  margin: 30px;
  padding: 20px;
  background: #153847;
}
.snp-reinforce-badge {
  color: #d2b6f2 !important;
}
@keyframes snp-float {
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}
@keyframes snp-breathe {
  50% {
    opacity: 0.3;
    transform: scale(1.05);
  }
}
@keyframes snp-route-flow {
  to {
    stroke-dashoffset: -1410;
  }
}
@keyframes snp-solute {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(170px);
    opacity: 0;
  }
}
@keyframes snp-albumin {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  48% {
    transform: translateY(40px);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}
@keyframes snp-confetti {
  to {
    transform: translateY(105vh) rotate(600deg);
    opacity: 0;
  }
}
@media (min-width: 1025px) {
  .snp-layout > #cm-sidebar {
    flex: 0 0 280px;
  }
  .cm-nav-hidden .snp-layout > #cm-sidebar {
    flex-basis: 0;
    min-width: 0;
  }
}
@media (max-width: 1200px) {
  .snp-home {
    padding: 24px 26px 0;
  }
  .snp-content-grid {
    grid-template-columns: minmax(0, 1fr) 235px;
    gap: 24px;
  }
  .snp-hero {
    padding: 30px;
  }
  .snp-hero-art {
    max-width: 300px;
  }
}
@media (max-width: 1024px) {
  .snp-main {
    width: 100%;
  }
  .snp-home {
    max-width: 990px;
  }
  .snp-hero h1 {
    font-size: 48px;
  }
  .snp-content-grid {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 30px;
  }
}
@media (max-width: 782px) {
  .admin-bar .snp-header {
    top: 46px;
  }
}
@media (max-width: 700px) {
  .snp-header {
    padding: 14px 18px;
  }
  .snp-brand small {
    font-size: 10px;
  }
  .snp-brand strong {
    font-size: 19px;
  }
  .snp-learning-bar {
    padding: 6px 18px;
  }
  .snp-learning-stats {
    gap: 12px;
  }
  .snp-desktop-only {
    display: none;
  }
  .snp-icon-button {
    width: 33px;
    height: 33px;
  }
  .snp-streak,
  .snp-xp {
    font-size: 11px;
  }
  .snp-home {
    padding: 18px 17px 0;
  }
  .snp-crumb {
    font-size: 9px;
    gap: 8px;
    margin-bottom: 18px;
  }
  .snp-hero {
    padding: 26px 23px;
    min-height: 355px;
    grid-template-columns: 1fr;
  }
  .snp-hero-copy {
    z-index: 2;
    position: relative;
  }
  .snp-hero h1 {
    font-size: 40px;
    max-width: 210px;
  }
  .snp-hero-description {
    font-size: 12px;
    max-width: calc(100% - 152px);
    min-height: 150px;
  }
  .snp-hero-tags {
    gap: 5px;
  }
  .snp-hero-tags span {
    font-size: 8px;
    padding: 3px 6px;
  }
  .snp-hero-art {
    position: absolute;
    right: 12px;
    top: 130px;
    width: 160px;
    opacity: 1;
  }
  .snp-art-label,
  .snp-orbit {
    display: none;
  }
  .snp-hero .snp-eyebrow {
    font-size: 8px;
    letter-spacing: 1.3px;
  }
  .snp-hero .snp-primary {
    padding: 10px 20px;
    min-height: 43px;
    font-size: 12px !important;
  }
  .snp-save-state {
    max-width: 260px;
    font-size: 9px;
  }
  .snp-content-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 26px;
  }
  .snp-route-section {
    order: 1;
  }
  .snp-rail {
    display: contents;
  }
  .snp-rail > .snp-progress-card {
    order: 0;
    padding: 15px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 27px;
    border-radius: 13px;
  }
  .snp-progress-card .snp-eyebrow,
  .snp-progress-card h2,
  .snp-progress-card .snp-mini-progress,
  .snp-progress-card .snp-stat-row:last-of-type {
    display: none;
  }
  .snp-ring {
    width: 57px;
    height: 57px;
    flex: 0 0 57px;
    padding: 4px;
    margin: 0;
  }
  .snp-ring strong {
    font-size: 16px;
  }
  .snp-ring span {
    display: none;
  }
  .snp-stat-row {
    font-size: 11px;
    border: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
  }
  .snp-stat-row strong {
    font-size: 13px;
  }
  .snp-rail > .snp-coach {
    display: none;
  }
  .snp-rail > .snp-review-card {
    order: 2;
  }
  .snp-rail > .snp-source-card {
    order: 3;
  }
  .snp-section-heading h2 {
    font-size: 22px;
  }
  .snp-lesson {
    padding: 20px 19px 32px;
    min-height: calc(100vh - 64px);
  }
  .snp-lesson > h1 {
    font-size: 25px;
  }
  .snp-lesson-top {
    gap: 14px;
    margin-bottom: 24px;
  }
  .snp-lesson-meta {
    font-size: 9px;
  }
  .snp-learn {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px;
  }
  .snp-learn img {
    height: 170px;
    width: 100%;
    order: -1;
  }
  .snp-activity p {
    font-size: 14px;
  }
  .snp-activity {
    min-height: 280px;
  }
  .snp-lesson-actions {
    gap: 12px;
    align-items: stretch;
    flex-direction: column;
    margin-top: 22px;
  }
  .snp-lesson-actions > span {
    max-width: 100%;
    font-size: 10px;
  }
  .snp-lesson-actions .snp-primary {
    width: 100%;
  }
  .snp-option {
    padding: 13px 14px;
    font-size: 13px !important;
    min-height: 61px;
  }
  .snp-feedback {
    padding: 14px;
    gap: 11px;
    font-size: 12px;
  }
  .snp-feedback img {
    width: 47px;
    height: 47px;
    flex-basis: 47px;
  }
  .snp-order-item {
    padding: 10px;
    gap: 9px;
  }
  .snp-order-item > strong {
    font-size: 12px;
  }
  .snp-order-controls {
    gap: 3px;
  }
  .snp-match-grid {
    gap: 8px;
    grid-template-columns: 1fr 1.18fr;
  }
  .snp-match-item {
    font-size: 11px !important;
    padding: 12px 9px;
    min-height: 93px;
  }
  .snp-interactive {
    padding: 15px;
  }
  .snp-flow {
    flex-direction: column;
    gap: 5px;
  }
  .snp-flow > div {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .snp-flow b {
    font-size: 22px;
    margin: 0;
  }
  .snp-flow > span {
    transform: rotate(90deg);
  }
  .snp-model-description {
    min-height: 0;
  }
  .snp-studio {
    aspect-ratio: 16/10;
  }
  .snp-host {
    width: 35%;
    bottom: -4%;
    height: 79%;
  }
  .snp-host.brain {
    left: 10%;
  }
  .snp-host.heart {
    right: 7%;
  }
  .snp-podcast-caption {
    padding: 15px;
    min-height: 150px;
  }
  .snp-podcast-caption p {
    font-size: 12px;
  }
  .snp-podcast-controls {
    gap: 8px;
  }
  .snp-podcast-controls input {
    flex-basis: 120px;
  }
  .snp-podcast-time {
    min-width: 68px;
  }
  .snp-podcast-controls button {
    width: 34px;
    height: 36px;
  }
  .snp-podcast-controls .snp-play {
    width: 42px;
  }
  .snp-dialog {
    padding: 32px 23px;
  }
  .snp-dialog h2 {
    font-size: 24px;
  }
  .snp-footer {
    font-size: 8px;
    padding: 20px 0;
  }
  .snp-toast {
    width: calc(100% - 32px);
    text-align: center;
  }
  .snp-match-item small {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    font-size: 9px;
  }
}
@media (max-width: 380px) {
  .snp-hero-art {
    width: 134px;
    right: 8px;
    top: 134px;
  }
  .snp-hero-description {
    max-width: calc(100% - 126px);
    min-height: 140px;
  }
  .snp-brand strong {
    font-size: 18px;
  }
  .snp-learning-stats {
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cm-sinapsis-page *,
  .cm-sinapsis-page *:before,
  .cm-sinapsis-page *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .snp-particle {
    top: var(--rest, 38px);
  }
  .is-damaged .snp-particle.albumin {
    top: 165px;
  }
  .snp-confetti {
    display: none;
  }
}
@media (min-width: 1025px) and (max-width: 1180px) {
  .snp-home {
    max-width: 1050px;
    margin: auto;
  }
  .snp-main {
    width: 100%;
  }
}
.snp-host {
  bottom: 20%;
  width: 32%;
}
.snp-host.brain {
  left: 12%;
}
.snp-host.heart {
  right: 11%;
}
@media (max-width: 700px) {
  .snp-host {
    bottom: 22%;
    width: 37%;
    height: 80%;
  }
  .snp-host.brain {
    left: 9%;
  }
  .snp-host.heart {
    right: 6%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cm-sinapsis-page #cm-sidebar .cm-logo-core .arc,
  .cm-sinapsis-page #cm-sidebar .cm-logo-core .ripple,
  .cm-sinapsis-page #cm-sidebar .cm-logo-core .comet,
  .cm-sinapsis-page #cm-sidebar .cm-logo-core .ring,
  .cm-sinapsis-page #cm-sidebar .cm-logo-core .meteor,
  .cm-sinapsis-page #cm-sidebar .cm-logo-core .sparks {
    display: none !important;
  }
  .cm-sinapsis-page #cm-sidebar .cm-logo-core:before,
  .cm-sinapsis-page #cm-sidebar .cm-logo-core:after {
    display: none !important;
  }
}
.snp-host {
  bottom: 15%;
}
@media (max-width: 700px) {
  .snp-host {
    bottom: 16%;
  }
}

/* Shared AI welcome → topic library → learning route. */
.snp-entry {
  max-width: 1200px;
  margin: auto;
  padding: 36px 40px 48px;
}
.snp-welcome-hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 34px 40px;
  border: 1px solid #234e6a;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 90% 50%, #0d4d704d, transparent 60%),
    linear-gradient(125deg, #102639, #0a1b2b);
}
.snp-welcome h1 {
  color: #f5faff;
  font-size: clamp(32px, 3.3vw, 48px);
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
}
.snp-welcome h1 span {
  color: #69d5ff;
}
.snp-entry-lead {
  font-size: 23px;
  line-height: 1.35;
  color: #deeffa;
  font-weight: 600;
  margin-bottom: 16px;
}
.snp-welcome-hero p:not(.snp-eyebrow):not(.snp-entry-lead) {
  color: #9fb8ca;
  font-size: 14px;
  max-width: 550px;
}
.snp-welcome-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.snp-welcome-chips span {
  font-size: 10px;
  color: #abd8e8;
  background: #11384e;
  border: 1px solid #28566b;
  border-radius: 20px;
  padding: 5px 10px;
}
.snp-welcome-art {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}
.snp-welcome-art img {
  width: min(100%, 280px);
  height: auto;
  position: relative;
  filter: drop-shadow(0 15px 35px #020b1677);
  animation: snp-float 5s ease-in-out infinite;
}
.snp-welcome-orbit {
  position: absolute;
  width: 100%;
  max-width: 290px;
  aspect-ratio: 1;
  border: 1px solid #3f86ac55;
  border-radius: 50%;
  box-shadow:
    0 0 0 24px #16456233,
    0 0 0 46px #16456218;
}
.snp-welcome-spark {
  position: absolute;
  right: 0;
  top: 10px;
  color: #72def5;
  font-size: 38px;
}
.snp-welcome-note {
  position: absolute;
  bottom: -5px;
  padding: 6px 14px;
  border: 1px solid #3b7896;
  background: #0d2d44;
  border-radius: 24px;
  color: #addef1;
  font-size: 11px;
  transform: rotate(-5deg);
}
.snp-welcome-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.snp-welcome-steps > div {
  padding: 20px;
  border: 1px solid #203c51;
  border-radius: 16px;
  background: #0c1d2d;
}
.snp-welcome-steps > div > span {
  color: #48bfec;
  font-size: 12px;
  font-weight: 800;
}
.snp-welcome-steps h2 {
  color: #e4f1fa;
  font-size: 16px;
  margin: 8px 0 7px;
}
.snp-welcome-steps p {
  color: #90aabd;
  font-size: 12px;
  margin: 0;
}
.snp-welcome-ad {
  margin: 28px 0;
  padding: 14px 18px;
  border: 1px solid #233b4e;
  border-radius: 16px;
  background: #0a1927;
}
.snp-ad-label {
  display: block;
  margin-bottom: 12px;
  color: #8095a7;
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.snp-welcome-ad [data-ad-placement] {
  min-height: 160px;
  width: 100%;
}
.snp-welcome-ad .adsbygoogle {
  width: 100%;
  min-height: 160px;
}
.snp-welcome-ad [data-ad-preview] {
  min-height: 160px;
  margin: 0;
  display: grid;
  place-items: center;
  color: #567286;
  font-size: 12px;
  border: 1px dashed #233b4e;
  border-radius: 8px;
}
.snp-entry-actions {
  text-align: center;
  margin-top: 30px;
}
.snp-entry-actions .snp-primary {
  min-width: 255px;
  justify-content: center;
  background: linear-gradient(180deg, #208fff, #0759ff);
  color: white;
  border-color: #459dff;
}
.snp-entry-actions p {
  font-size: 11px;
  color: #809caf;
  margin: 12px 0 0;
}
.snp-catalog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0 38px;
}
.snp-catalog-heading h1 {
  color: #f1f7ff;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
  letter-spacing: -1px;
  margin-bottom: 12px;
}
.snp-catalog-heading p:not(.snp-eyebrow) {
  color: #99b0c2;
  font-size: 14px;
  margin: 0;
}
.snp-catalog-count {
  color: #8ccede;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid #29566a;
  background: #103344;
  border-radius: 24px;
  padding: 6px 12px;
}
.snp-category-heading {
  display: flex;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid #20394c;
  padding-bottom: 15px;
  margin-bottom: 23px;
}
.snp-category-heading h2 {
  font-size: 20px;
  margin: 0;
  color: #e4f1fa;
}
.snp-category-heading > span {
  color: #6f8fa7;
  font-size: 11px;
}
.snp-topic-grid {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(200px, 1fr);
  gap: clamp(24px, 5vw, 75px);
}
.snp-topic-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #2b6076;
  border-radius: 22px;
  background: #0f2233;
  box-shadow: 0 15px 50px #020b151f;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.snp-topic-card:hover {
  border-color: #42b2d6;
  box-shadow: 0 12px 38px #117daf1a;
}
.snp-topic-art {
  position: relative;
  height: 235px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 70%, #20778c66, transparent 60%),
    linear-gradient(145deg, #133748, #0b2539);
  overflow: hidden;
}
.snp-topic-art img {
  position: relative;
  z-index: 1;
  width: 240px;
  height: 240px;
  object-fit: contain;
  filter: drop-shadow(0 10px 25px #48c4c733);
}
.snp-topic-status {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.8px;
  color: #8ce3d7;
  background: #09232cdb;
  border: 1px solid #28646b;
  border-radius: 20px;
  padding: 5px 9px;
}
.snp-topic-orbit {
  position: absolute;
  width: 220px;
  height: 220px;
  border: 1px solid #58d2d326;
  border-radius: 50%;
  box-shadow:
    0 0 0 35px #53cecc09,
    0 0 0 70px #53cecc05;
}
.snp-topic-copy {
  padding: 24px;
}
.snp-topic-copy .snp-eyebrow {
  font-size: 9px;
  margin-bottom: 7px;
}
.snp-topic-copy h3 {
  font-size: 26px;
  color: #f4fbff;
  margin: 0 0 10px;
  letter-spacing: -0.7px;
  line-height: 1.2;
}
.snp-topic-copy > p:not(.snp-eyebrow) {
  font-size: 13px;
  color: #9bb5c7;
  line-height: 1.65;
}
.snp-topic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 10px;
  color: #8dc5d0;
  margin: 18px 0 22px;
}
.snp-topic-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  color: #819eb1;
}
.snp-topic-progress-label strong {
  color: #70dfd4;
}
.snp-topic-progress {
  height: 5px;
  background: #203c50;
  border-radius: 10px;
  margin: 9px 0 20px;
  overflow: hidden;
}
.snp-topic-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: #4cddce;
  border-radius: inherit;
}
.snp-topic-copy .snp-primary {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.snp-catalog-note {
  align-self: center;
  max-width: 270px;
  padding: 28px 0;
  color: #8faebf;
  font-size: 13px;
}
.snp-catalog-note img {
  width: 115px;
  height: 115px;
  object-fit: contain;
  margin-bottom: 16px;
}
.snp-catalog-note h3 {
  color: #d4e9f2;
  font-size: 19px;
  line-height: 1.35;
  margin-bottom: 15px;
}
.snp-catalog-note > span {
  display: block;
  margin-top: 24px;
  font-size: 11px;
  color: #7edcd4;
}
@media (max-width: 900px) {
  .snp-entry {
    padding: 24px;
  }
  .snp-welcome-hero {
    padding: 28px;
    gap: 16px;
  }
  .snp-welcome-steps {
    gap: 10px;
  }
  .snp-welcome-steps > div {
    padding: 16px;
  }
  .snp-welcome-chips {
    gap: 5px;
  }
}
@media (max-width: 700px) {
  .snp-entry {
    padding: 20px 17px 36px;
  }
  .snp-welcome-hero {
    display: flex;
    flex-direction: column-reverse;
    padding: 23px;
    text-align: center;
    gap: 25px;
  }
  .snp-welcome-art {
    width: 150px;
    margin-top: 10px;
  }
  .snp-welcome-art img {
    width: 150px;
  }
  .snp-welcome-orbit {
    box-shadow:
      0 0 0 16px #16456233,
      0 0 0 30px #16456218;
  }
  .snp-welcome-spark {
    font-size: 24px;
    right: -16px;
  }
  .snp-welcome-note {
    font-size: 9px;
    white-space: nowrap;
  }
  .snp-welcome h1 {
    font-size: 33px;
    margin-bottom: 15px;
  }
  .snp-entry-lead {
    font-size: 19px;
  }
  .snp-welcome-hero p:not(.snp-eyebrow):not(.snp-entry-lead) {
    font-size: 12px;
  }
  .snp-welcome-chips {
    justify-content: center;
    margin-top: 16px;
  }
  .snp-welcome-chips span {
    padding: 4px 7px;
    font-size: 9px;
  }
  .snp-welcome-steps {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 18px 0;
  }
  .snp-welcome-steps > div {
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: 10px;
    padding: 14px 16px;
  }
  .snp-welcome-steps h2 {
    margin: 0 0 4px;
    font-size: 14px;
  }
  .snp-welcome-steps p {
    grid-column: 2;
    font-size: 11px;
  }
  .snp-welcome-ad {
    margin: 22px 0;
    padding: 12px;
  }
  .snp-welcome-ad [data-ad-placement],
  .snp-welcome-ad .adsbygoogle,
  .snp-welcome-ad [data-ad-preview] {
    min-height: 200px;
  }
  .snp-entry-actions {
    margin-top: 24px;
  }
  .snp-entry-actions .snp-primary {
    width: 100%;
    min-width: 0;
  }
  .snp-catalog-heading {
    display: block;
    margin: 25px 0 30px;
  }
  .snp-catalog-heading p:not(.snp-eyebrow) {
    font-size: 12px;
  }
  .snp-catalog-count {
    display: inline-block;
    margin-top: 18px;
  }
  .snp-topic-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .snp-topic-copy {
    padding: 22px;
  }
  .snp-topic-art {
    height: 210px;
  }
  .snp-topic-art img {
    width: 220px;
    height: 220px;
  }
  .snp-catalog-note {
    max-width: none;
    padding: 22px;
    background: #0c2030;
    border: 1px solid #203d51;
    border-radius: 18px;
  }
  .snp-catalog-note img {
    float: right;
    width: 75px;
    height: 75px;
    margin: 0 0 12px 10px;
  }
  .snp-catalog-note h3 {
    font-size: 17px;
  }
  .snp-catalog-note p {
    font-size: 12px;
  }
}
/* Brand mark, seated hosts and directed podcast shots. */
.snp-isotipo {
  display: inline-block;
  width: 28px;
  height: 25px;
  object-fit: contain;
  vertical-align: middle;
}
.snp-route-end > .snp-isotipo {
  width: 46px;
  height: 42px;
  margin-bottom: 10px;
}
.snp-welcome-art .snp-welcome-spark {
  width: 45px;
  height: 41px;
}
.snp-catalog-note > span > .snp-isotipo {
  width: 21px;
  height: 20px;
  margin: 0 5px 0 0;
  float: none;
}
.snp-studio {
  aspect-ratio: 16/9;
  background: #0b1730;
}
.snp-studio:before {
  display: none;
}
.snp-camera {
  position: absolute;
  inset: 0;
  background: #0d1934 url("images/podcast-studio-bg.webp") center/cover;
  transform-origin: 50% 55%;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.snp-camera[data-shot="brain"] {
  transform: translateX(19%) scale(1.55);
  transform-origin: 28% 58%;
}
.snp-camera[data-shot="heart"] {
  transform: translateX(-19%) scale(1.55);
  transform-origin: 72% 58%;
}
.snp-studio .snp-host {
  width: 37%;
  height: auto;
  aspect-ratio: 1;
  bottom: 7%;
  filter: brightness(0.92);
  transform: none;
  z-index: 2;
}
.snp-studio .snp-host.brain {
  left: 9%;
}
.snp-studio .snp-host.heart {
  right: 9%;
}
.snp-studio .snp-host.is-active {
  filter: brightness(1.08) drop-shadow(0 2px 12px #37b4e722);
}
.snp-host-sprite {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 300% 200%;
  background-position: 0 0;
}
.brain .snp-host-sprite {
  background-image: url("images/podcast-brain-seated.webp");
}
.heart .snp-host-sprite {
  background-image: url("images/podcast-heart-seated.webp");
}
.snp-host-sprite[data-frame="1"] {
  background-position: 50% 0;
}
.snp-host-sprite[data-frame="2"] {
  background-position: 100% 0;
}
.snp-host-sprite[data-frame="3"] {
  background-position: 0 100%;
}
.snp-host-sprite[data-frame="4"] {
  background-position: 50% 100%;
}
.snp-host-sprite[data-frame="5"] {
  background-position: 100% 100%;
}
.snp-podcast-table {
  position: absolute;
  z-index: 3;
  width: 24%;
  height: 12%;
  bottom: 14%;
  left: 38%;
  border-radius: 50%;
  background: linear-gradient(#3b3950, #171827);
  border: 2px solid #53566d;
  box-shadow:
    0 12px 0 -2px #111426,
    0 22px 24px #0008;
  display: grid;
  place-items: center;
}
.snp-podcast-table:after {
  content: "";
  position: absolute;
  top: 100%;
  width: 8%;
  height: 145%;
  background: linear-gradient(90deg, #070d16, #354458, #0a1020);
}
.snp-podcast-table img {
  width: 24%;
  max-height: 75%;
  object-fit: contain;
  transform: rotateX(45deg);
}
.snp-studio .snp-mic {
  width: 12%;
  height: 33%;
  bottom: 21%;
}
.snp-studio .snp-mic.one {
  left: 33%;
  transform: rotate(-8deg);
}
.snp-studio .snp-mic.two {
  right: 33%;
  transform: rotate(8deg);
}
.snp-camera-caption {
  position: absolute;
  bottom: 13px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #6385aa66;
  border-radius: 24px;
  background: #07172bcc;
  padding: 3px 12px;
  color: #d2e5f5;
  font-size: 10px;
  z-index: 5;
  white-space: nowrap;
}
.snp-camera-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.snp-camera-controls button {
  border: 1px solid #2b4a60;
  background: #0d2436;
  border-radius: 20px;
  padding: 6px 12px;
  color: #90aebf;
  font-size: 11px;
}
.snp-camera-controls button[aria-pressed="true"] {
  background: #154563;
  color: #bcedff;
  border-color: #379bca;
}
@media (max-width: 700px) {
  .snp-studio {
    aspect-ratio: 4/3;
  }
  .snp-studio .snp-host {
    width: 45%;
    bottom: 12%;
  }
  .snp-studio .snp-host.brain {
    left: 2%;
  }
  .snp-studio .snp-host.heart {
    right: 2%;
  }
  .snp-studio .snp-mic {
    bottom: 25%;
    width: 14%;
    height: 30%;
  }
  .snp-podcast-table {
    bottom: 21%;
  }
  .snp-camera-controls button {
    padding: 6px 9px;
    font-size: 10px;
  }
  .snp-studio-label {
    top: 10px;
    left: 10px;
    font-size: 8px;
  }
  .snp-camera-caption {
    bottom: 8px;
    font-size: 9px;
  }
}
/* Interactive qualitative physiology. */
.snp-model-tabs {
  flex-wrap: wrap;
}
.snp-mechanism-canvas {
  margin: 22px 0 16px;
  border: 1px solid #294f64;
  border-radius: 16px;
  background: radial-gradient(ellipse at center, #12384688, #081c2b);
  overflow: hidden;
  padding: 20px 12px;
}
.snp-mechanism-legend {
  font-size: 11px;
  color: #89b1c7;
  margin: 0 0 16px;
}
.snp-mechanism-result {
  padding: 18px;
  background: #123143;
  border-left: 3px solid #53d7d0;
  border-radius: 10px;
}
.snp-mechanism-result strong {
  display: block;
  color: #b2f4e7;
  margin-bottom: 8px;
  font-size: 16px;
}
.snp-mechanism-result p {
  margin: 0;
  color: #a7c1d0;
  font-size: 13px;
}
.snp-model-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  color: #78bfb9;
  font-size: 11px;
}
.snp-model-footer button {
  border: 1px solid #385f72;
  border-radius: 20px;
  background: #0d2738;
  color: #bdd9e5;
  padding: 6px 12px;
  font-size: 11px;
}
.snp-balance-scene {
  display: grid;
  grid-template-columns: 1fr 0.45fr 1.3fr 0.45fr 1fr;
  align-items: center;
  min-height: 240px;
  gap: 3px;
}
.snp-lab-organ {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.snp-lab-organ svg,
.snp-lab-organ img {
  width: 95%;
  height: 95px;
  object-fit: contain;
}
.snp-lab-organ strong {
  color: #d8eaf3;
  font-size: 12px;
}
.snp-lab-organ small {
  min-height: 30px;
  color: #8cb0c5;
  font-size: 10px;
}
.snp-lab-plasma {
  height: 190px;
  position: relative;
  border-radius: 42px;
  border: 2px solid #ac657e;
  background: linear-gradient(90deg, #642f4855, #8f36532e, #642f4855);
  overflow: hidden;
}
.snp-lab-plasma > span {
  position: absolute;
  top: 12px;
  width: 100%;
  text-align: center;
  color: #e8c0cc;
  font-size: 10px;
  letter-spacing: 1px;
}
.snp-lab-plasma > strong {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
  color: #edcd99;
  font-size: 10px;
  padding: 0 8px;
}
.snp-plasma-dots {
  position: absolute;
  inset: 35px 2px;
}
.snp-plasma-protein {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e5bf58;
  box-shadow: 0 0 8px #e5bf5844;
  position: absolute;
  left: var(--x);
  top: var(--y);
  animation: snp-protein-bob 2.5s ease-in-out infinite;
  animation-delay: var(--delay);
}
.snp-production-flow,
.snp-loss-flow {
  position: relative;
  height: 50px;
  border-top: 1px dashed #6a9aa0;
  border-bottom: 1px dashed #6a9aa0;
}
.snp-production-flow::after,
.snp-loss-flow::after {
  content: "→";
  position: absolute;
  top: -26px;
  width: 100%;
  text-align: center;
  color: #93c6cb;
  font-size: 22px;
}
.snp-flow-protein {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #ecc65f;
  border-radius: 50%;
  top: var(--y);
  animation: snp-protein-flow 2.3s linear infinite;
  animation-delay: var(--delay);
}
.snp-loss-flow .snp-flow-protein {
  opacity: 0.15;
  animation-duration: 5s;
}
[data-state="loss"] .snp-plasma-protein:nth-child(n + 5),
[data-state="compensate"] .snp-plasma-protein:nth-child(n + 7) {
  visibility: hidden;
}
[data-state="loss"] .snp-loss-flow .snp-flow-protein,
[data-state="compensate"] .snp-loss-flow .snp-flow-protein {
  opacity: 1;
  animation-duration: 1s;
}
[data-state="compensate"] .snp-production-flow .snp-flow-protein {
  animation-duration: 1.1s;
}
.snp-sodium-scene {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.35fr 1fr;
  min-height: 260px;
}
.snp-tubule,
.snp-interstitium {
  position: relative;
  background: #183a5777;
  border-radius: 15px;
  overflow: hidden;
}
.snp-tubule > strong,
.snp-interstitium > strong {
  position: absolute;
  width: 100%;
  top: 14px;
  text-align: center;
  color: #acd9ef;
  font-size: 11px;
  z-index: 2;
}
.snp-tubule > span {
  position: absolute;
  top: 43%;
  left: 38%;
  color: #ffd574;
  font-size: 24px;
}
.snp-sodium-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ebc569;
  left: var(--x);
  top: var(--y);
  animation: snp-sodium-bob 2s ease-in-out infinite;
  animation-delay: var(--delay);
}
.snp-epithelium {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: repeating-linear-gradient(#7c4b7d55 0 28px, #241f4733 29px 32px);
  border-left: 2px solid #876a9f;
  border-right: 2px solid #876a9f;
}
.snp-epithelium > span {
  position: absolute;
  top: calc(50% - 43px);
  color: #e6c9fb;
  font-size: 12px;
  font-weight: 700;
}
.snp-epithelium small {
  position: absolute;
  top: calc(50% + 30px);
  color: #bc9bd2;
  writing-mode: vertical-rl;
  font-size: 10px;
}
.snp-channel {
  position: absolute;
  top: calc(50% - 12.5px);
  width: 125%;
  height: 25px;
  border-top: 6px solid #a280c1;
  border-bottom: 6px solid #a280c1;
  background: #0b1b28;
}
.snp-crossing-sodium {
  position: absolute;
  top: calc(50% - 4.5px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd174;
  z-index: 3;
  animation: snp-sodium-cross 5s linear infinite;
  animation-delay: var(--delay);
}
[data-state="normal"] .snp-crossing-sodium:nth-of-type(n + 3) {
  visibility: hidden;
}
[data-state="retention"] .snp-crossing-sodium,
[data-state="water"] .snp-crossing-sodium {
  animation-duration: 2s;
}
[data-state="retention"] .snp-channel,
[data-state="water"] .snp-channel {
  border-color: #58d4ca;
  box-shadow: 0 0 16px #52dec744;
}
.snp-water-level {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 28%;
  background: linear-gradient(#49c8e655, #237babaa);
  border-top: 3px solid #63c5dc;
  transition: height 1s;
}
.snp-water-level span {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  color: #c5f6ff;
  font-size: 20px;
}
.snp-water-level:before {
  content: "";
  position: absolute;
  width: 180%;
  height: 30px;
  top: -18px;
  left: -30%;
  border-radius: 45%;
  border-top: 2px solid #99effe88;
  animation: snp-water-wave 3s ease-in-out infinite;
}
[data-state="retention"] .snp-water-level {
  height: 44%;
}
[data-state="water"] .snp-water-level {
  height: 76%;
}
.snp-tissue-label {
  position: absolute;
  bottom: 12px;
  width: 100%;
  text-align: center;
  color: #b9e4f5;
  font-size: 10px;
}
.snp-protection-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.snp-protection-lane > span {
  display: block;
  color: #abc7dc;
  font-size: 10px;
  text-align: center;
  margin: 4px 0 16px;
  letter-spacing: 1px;
}
.snp-protection-lane > strong {
  display: block;
  text-align: center;
  font-size: 11px;
  color: #bedbe1;
  margin-top: 13px;
  min-height: 36px;
}
.snp-bloodstream,
.snp-immune-field {
  position: relative;
  height: 190px;
  background: #35263788;
  border: 2px solid #a65e72;
  border-radius: 35px;
  overflow: hidden;
}
.snp-immune-field {
  border-color: #408a77;
  background: #113d3788;
}
.snp-blood-cell {
  position: absolute;
  width: 16px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid #ed6b80;
  background: #963b53;
  left: var(--x);
  top: var(--y);
  animation: snp-protein-bob 3s infinite;
  animation-delay: var(--delay);
}
.snp-anticoagulant,
.snp-defense {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 17px;
  height: 21px;
  border: 2px solid #72d9e9;
  border-radius: 4px 4px 12px 12px;
  background: #3cafcf44;
  animation: snp-protein-bob 3s infinite;
  animation-delay: var(--delay);
}
.snp-defense {
  border-color: #74ddb0;
  background: #43ac7644;
}
.snp-clot-cloud {
  position: absolute;
  inset: 30% 20%;
  opacity: 0;
  transition: opacity 0.7s;
}
.snp-clot-cell {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 18px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #ef6d81;
  background: #a92d50;
  box-shadow: 0 0 9px #ff758733;
}
[data-state="clot"] .snp-clot-cloud {
  opacity: 1;
}
[data-state="clot"] .snp-anticoagulant:nth-of-type(n + 12),
[data-state="immune"] .snp-defense:nth-of-type(n + 2) {
  visibility: hidden;
}
.snp-microbe {
  position: absolute;
  right: 14%;
  bottom: 18%;
  opacity: 0.2;
  width: 42px;
  height: 42px;
  border: 4px dotted #bc86d5;
  border-radius: 50%;
  background: #a657aa44;
  animation: snp-protein-bob 2s infinite;
}
.snp-microbe i {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #c6a1df;
  border-radius: 50%;
  left: 30%;
  top: 30%;
}
.snp-microbe i:nth-child(2) {
  left: 60%;
  top: 60%;
}
.snp-microbe i:nth-child(3) {
  left: 25%;
  top: 66%;
}
[data-state="immune"] .snp-microbe {
  opacity: 1;
}
.snp-mechanism.is-paused * {
  animation-play-state: paused !important;
}
@keyframes snp-protein-flow {
  from {
    left: 0;
  }
  to {
    left: 90%;
  }
}
@keyframes snp-protein-bob {
  50% {
    transform: translate(3px, 8px);
  }
}
@keyframes snp-sodium-bob {
  50% {
    transform: translate(7px, 18px);
  }
}
@keyframes snp-sodium-cross {
  0% {
    left: 12%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 85%;
    opacity: 0;
  }
}
@keyframes snp-water-wave {
  50% {
    transform: translateX(20px) rotate(3deg);
  }
}
@media (max-width: 700px) {
  .snp-model-tabs button {
    flex: 1 1 90px;
    padding: 8px 6px;
    font-size: 11px;
  }
  .snp-mechanism-canvas {
    padding: 15px 8px;
  }
  .snp-balance-scene {
    min-height: 220px;
    grid-template-columns: 1fr 0.28fr 1.2fr 0.28fr 1fr;
  }
  .snp-lab-organ svg,
  .snp-lab-organ img {
    height: 75px;
  }
  .snp-lab-organ strong {
    font-size: 10px;
  }
  .snp-lab-organ small,
  .snp-lab-plasma > strong {
    font-size: 9px;
  }
  .snp-plasma-protein {
    width: 8px;
    height: 8px;
  }
  .snp-lab-plasma {
    height: 175px;
  }
  .snp-sodium-scene {
    min-height: 240px;
    grid-template-columns: 1fr 0.45fr 1fr;
  }
  .snp-tubule > strong,
  .snp-interstitium > strong {
    font-size: 9px;
  }
  .snp-tissue-label {
    font-size: 8px;
  }
  .snp-protection-scene {
    gap: 8px;
  }
  .snp-mechanism-result {
    padding: 14px;
  }
  .snp-mechanism-result strong {
    font-size: 14px;
  }
  .snp-mechanism-result p {
    font-size: 12px;
  }
  .snp-model-footer {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .snp-crossing-sodium {
    left: calc(17% + var(--i) * 8%);
  }
  .snp-flow-protein {
    left: calc(var(--i) * 15%);
  }
}

/* All available physiology routes share one category. */
.snp-topic-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 24px;
}
.snp-topic-card {
  display: flex;
  flex-direction: column;
}
.snp-topic-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.snp-topic-copy > p:not(.snp-eyebrow) {
  flex: 1;
}
.snp-topic-copy .snp-primary {
  margin-top: 22px;
}
.snp-catalog > .snp-catalog-note {
  max-width: none;
  margin-top: 28px;
  padding: 24px;
  border: 1px solid #203d51;
  border-radius: 18px;
}
.snp-hero h1 {
  max-width: 520px;
}
@media (max-width: 700px) {
  .snp-hero h1 {
    max-width: 100%;
    font-size: clamp(30px, 9vw, 40px);
  }
  .snp-topic-grid {
    grid-template-columns: 1fr;
  }
}

/* Route-specific physiology diagrams. */
.snp-system-canvas {
  background: radial-gradient(ellipse at 50% 40%, #173249, #081c2b 78%);
  border: 1px solid #294c64;
  border-radius: 22px;
  overflow: hidden;
  margin: 18px 0 12px;
}
.snp-system-svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 420px;
}
.snp-system-svg text {
  fill: #e2f2ff;
  font:
    600 17px/1.2 system-ui,
    sans-serif;
  letter-spacing: 0.3px;
}
.snp-system-svg .snp-sys-small {
  font-size: 14px;
  letter-spacing: 0;
}
.snp-sys-particle {
  animation: snp-system-flow 3.8s linear infinite;
  animation-delay: var(--delay);
}
.snp-sys-breathe {
  animation: snp-system-breathe 2.8s ease-in-out infinite alternate;
}
.snp-sys-water {
  animation: snp-system-breathe 3s ease-in-out infinite alternate;
}
.snp-system-note {
  margin: 10px 0 0;
  color: #8fabc1;
  font-size: 11px;
  line-height: 1.6;
}
@keyframes snp-system-flow {
  0% {
    transform: translate(0, 0);
    opacity: 0.15;
  }
  12%,
  84% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy));
    opacity: 0.15;
  }
}
@keyframes snp-system-breathe {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 1;
  }
}
.snp-system.is-reduced * {
  animation: none !important;
}
.snp-system.is-reduced .snp-sys-particle {
  transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5));
}
@media (prefers-reduced-motion: reduce) {
  .snp-sys-particle,
  .snp-sys-breathe,
  .snp-sys-water {
    animation: none !important;
  }
  .snp-sys-particle {
    transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5));
  }
}
@media (max-width: 600px) {
  .snp-system .snp-model-tabs {
    grid-template-columns: 1fr;
    display: grid;
  }
  .snp-system .snp-model-tabs button {
    min-height: 42px;
  }
  .snp-system-canvas {
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 14px;
  }
  .snp-system .snp-model-footer {
    flex-wrap: wrap;
    gap: 12px;
  }
  .snp-system-svg text {
    font-size: 22px;
  }
  .snp-system-svg .snp-sys-small {
    font-size: 20px;
  }
}

/* Match simulator navigation: use the theme's desktop close/reopen controls. */
@media (min-width: 1025px) {
  .cm-sinapsis-page .snp-menu {
    display: none;
  }
  .cm-sinapsis-page.cm-nav-hidden .snp-header {
    padding-left: 68px;
  }
}

/* Let desktop workspaces grow with the available area, including a collapsed menu. */
@media (min-width: 1201px) {
  .snp-home,
  .snp-entry {
    width: 100%;
    max-width: none;
    padding-inline: clamp(28px, 2.5vw, 64px);
  }
  .snp-content-grid {
    grid-template-columns: minmax(0, 1fr) clamp(280px, 22%, 360px);
    gap: clamp(28px, 2vw, 48px);
  }
  .snp-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 36%);
    align-items: center;
    min-height: 320px;
    padding: 28px clamp(32px, 3vw, 64px);
  }
  .snp-hero-description {
    max-width: 58ch;
    font-size: 16px;
  }
  .snp-hero-art {
    max-width: 300px;
  }
  .snp-hero-tags span,
  .snp-save-state {
    font-size: 12px;
  }
  .snp-lesson {
    width: min(100%, 1200px);
    max-width: none;
    padding-inline: 40px;
  }
  .snp-learn {
    grid-template-columns: minmax(0, 1fr) 32%;
  }
  .snp-learn p {
    font-size: 17px;
    line-height: 1.8;
  }
  .snp-learn img {
    max-height: 320px;
  }
  .snp-rail .snp-eyebrow {
    font-size: 10px;
  }
  .snp-stat-row {
    font-size: 12px;
  }
  .snp-progress-card h2 {
    font-size: 22px;
  }
  .snp-ring {
    width: 150px;
    height: 150px;
  }
  .snp-ring span {
    font-size: 11px;
  }
  .snp-welcome-hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 36%);
  }
  .snp-welcome-art img {
    width: min(100%, 330px);
  }
}
@media (min-width: 1600px) {
  .snp-hero h1 {
    font-size: 58px;
    max-width: 650px;
  }
  .snp-section-heading h2 {
    font-size: 28px;
  }
  .snp-section-heading .snp-eyebrow {
    font-size: 10px;
  }
  .snp-topic-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@container (min-width: 1000px) {
  .snp-node-row {
    --node-size: 108px;
    --card-width: 340px;
    --card-gap: 84px;
    height: 190px;
  }
  .snp-node-row.is-focused {
    height: 280px;
  }
  .is-focused .snp-node-button {
    --node-size: 154px;
  }
  .snp-active-card {
    padding: 24px;
  }
  .snp-active-card h3,
  .snp-node-copy h3 {
    font-size: 23px;
  }
  .snp-active-card p,
  .snp-node-copy p {
    font-size: 16px;
  }
  .snp-active-card button {
    min-height: 50px;
    font-size: 16px;
  }
  .snp-node-copy {
    left: calc(var(--node-x) + 75px);
  }
  .has-label-left .snp-node-copy {
    left: auto;
    right: calc(100% - var(--node-x) + 75px);
  }
}

/* Readable desktop text throughout the learning flow, not only the cover. */
@media (min-width: 1201px) {
  .snp-crumb,
  .snp-learning-label,
  .snp-hero-tags span,
  .snp-save-state,
  .snp-route-counter,
  .snp-stat-row,
  .snp-topic-meta,
  .snp-topic-progress-label,
  .snp-lesson-meta,
  .snp-lesson-top > span,
  .snp-lesson-actions > span,
  .snp-active-card small,
  .snp-active-card > strong,
  .snp-catalog-count {
    font-size: 14px;
  }
  .snp-eyebrow,
  .snp-section-heading .snp-eyebrow,
  .snp-progress-card .snp-eyebrow,
  .snp-topic-copy .snp-eyebrow,
  .snp-topic-status {
    font-size: 12px;
  }
  .snp-streak,
  .snp-xp {
    font-size: 15px;
  }
  .snp-primary {
    font-size: 16px !important;
    min-height: 52px;
  }
  .snp-secondary,
  .snp-text-button {
    font-size: 14px !important;
  }
  .snp-hero-description {
    font-size: 18px;
    max-width: 70ch;
  }
  .snp-activity p,
  .snp-learn p,
  .snp-topic-copy > p:not(.snp-eyebrow),
  .snp-catalog-heading p:not(.snp-eyebrow) {
    font-size: 18px;
    line-height: 1.75;
  }
  .snp-lesson > h1 {
    font-size: 34px;
    line-height: 1.25;
  }
  .snp-option {
    font-size: 18px !important;
    padding: 18px;
  }
  .snp-option > span:first-child,
  .snp-order-item > span:first-child {
    font-size: 14px;
  }
  .snp-feedback,
  .snp-order-item > strong,
  .snp-takeaway {
    font-size: 16px;
  }
  .snp-match-item {
    font-size: 16px !important;
  }
  .snp-match-item small {
    font-size: 14px;
  }
  .snp-node-copy {
    width: min(310px, calc(100% - var(--node-x) - var(--node-size) / 2 - 26px));
  }
  .has-label-left .snp-node-copy {
    width: min(310px, calc(var(--node-x) - var(--node-size) / 2 - 26px));
  }
  .snp-node-copy h3,
  .snp-active-card h3 {
    font-size: 22px;
  }
  .snp-node-copy p,
  .snp-active-card p {
    font-size: 16px;
  }
  .snp-active-card button {
    font-size: 16px;
    min-height: 50px;
  }
  .snp-ring strong {
    font-size: 36px;
  }
  .snp-ring span {
    font-size: 13px;
  }
  .snp-coach h3,
  .snp-review-card h3 {
    font-size: 18px;
  }
  .snp-coach p,
  .snp-review-card p,
  .snp-source-card p {
    font-size: 15px;
  }
  .snp-source-card a {
    font-size: 16px;
  }
  .snp-podcast-caption strong,
  .snp-podcast-time,
  .snp-podcast-controls select,
  .snp-podcast-chapters button,
  .snp-transcript,
  .snp-model-footer,
  .snp-mechanism-legend {
    font-size: 14px;
  }
  .snp-podcast-caption p,
  .snp-transcript p {
    font-size: 17px;
  }
  .snp-podcast-controls button,
  .snp-model-tabs button,
  .snp-model-footer button {
    font-size: 15px;
  }
  .snp-model-description {
    font-size: 17px !important;
  }
  .snp-note {
    font-size: 15px !important;
  }
  .snp-mechanism-result strong {
    font-size: 20px;
  }
  .snp-footer {
    font-size: 12px;
  }
}

/* 1.4 — Scale the full study workspace with the screen, not just the cover. */
.cm-sinapsis-page .snp-options button:disabled {
  opacity: 1;
}
.snp-system .snp-model-footer {
  flex-wrap: wrap;
  gap: 12px;
}
.snp-diagram-dialog {
  width: min(1000px, calc(100vw - 24px));
  max-width: 1000px;
  max-height: 90vh;
  border: 1px solid #467287;
  border-radius: 20px;
  padding: 18px;
  background: #0d2333;
  color: #ddecf4;
}
.snp-diagram-dialog::backdrop {
  background: #020b14cc;
  backdrop-filter: blur(6px);
}
.snp-diagram-scroll {
  overflow: auto;
  margin-top: 18px;
}
.snp-diagram-scroll .snp-system-svg {
  min-width: 650px;
  width: 100%;
  max-width: none;
  max-height: none;
}
.snp-diagram-dialog > p {
  font-size: 14px !important;
  margin: 12px 0 0;
}
.snp-main {
  --snp-reading: 18px;
  --snp-ui: 16px;
  --snp-small: 14px;
}
.snp-study-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.snp-study-work {
  min-width: 0;
}
.snp-study-sidebar {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.snp-study-plan {
  border: 1px solid #29495e;
  border-radius: 22px;
  background: #102638;
  padding: 26px;
}
.snp-study-plan h2 {
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 10px;
}
.snp-study-plan > p:not(.snp-eyebrow) {
  color: #95c9d0;
  font-size: 15px;
  margin-bottom: 18px;
}
.snp-study-plan ol {
  list-style: none;
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
}
.snp-study-plan li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #9eb6c7;
  font-size: 15px;
  line-height: 1.4;
}
.snp-study-plan li > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: #203c50;
  font-size: 12px;
}
.snp-study-plan li.is-current {
  color: #effbf9;
  font-weight: 700;
}
.snp-study-plan li.is-current > span:first-child {
  background: #63dccb;
  color: #0b2f35;
  box-shadow: 0 0 0 4px #62daca18;
}
.snp-study-plan li.is-done {
  color: #85c9be;
}
.snp-study-recall {
  border: 1px solid #345465;
  border-radius: 14px;
  padding: 16px;
  background: #122d3c;
}
.snp-study-recall summary {
  cursor: pointer;
  color: #9be8d8;
  font-size: 16px;
  min-height: 30px;
}
.snp-study-recall p {
  font-size: 16px;
  line-height: 1.7;
  color: #bbd0da;
  margin: 14px 0 0;
}
.snp-lesson-actions {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: linear-gradient(#081422ed, #081422);
  padding: 18px 0 max(18px, env(safe-area-inset-bottom));
  backdrop-filter: blur(12px);
}
.snp-activity {
  min-height: 0;
}
.snp-lesson-actions:has(.snp-primary:disabled) {
  position: static;
}
.snp-option {
  min-height: 76px;
}
.snp-activity p,
.snp-learn p {
  font-size: var(--snp-reading);
  line-height: 1.75;
}
.snp-feedback {
  align-items: center;
  font-size: var(--snp-ui);
  line-height: 1.65;
  scroll-margin-bottom: 130px;
}
.snp-feedback strong {
  font-size: 1.15em;
}
.snp-complete > .snp-success-scene {
  margin: 0 auto 16px;
  width: 180px;
  height: 165px;
}
.snp-catalog-tools {
  display: flex;
  align-items: end;
  gap: 18px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.snp-catalog-tools label {
  display: grid;
  gap: 7px;
  flex: 1;
  min-width: 200px;
  font-size: var(--snp-small);
  color: #aec9d8;
}
.snp-catalog-tools label:first-child {
  flex: 2;
}
.snp-catalog-tools input,
.snp-catalog-tools select {
  width: 100%;
  height: 54px;
  min-height: 54px;
  border: 1px solid #33546b;
  border-radius: 13px;
  padding: 12px 16px;
  background: #102739;
  color: #eff7fc;
  font-size: var(--snp-ui);
  position: static;
}
.snp-catalog-tools input::placeholder {
  color: #96b0c1;
}
.snp-catalog-tools > span {
  font-size: var(--snp-small);
  padding-bottom: 15px;
  color: #a6c2cf;
}
.snp-resume-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  text-align: left;
  background: linear-gradient(120deg, #15414b, #153142);
  border: 1px solid #4f8d92;
  border-radius: 18px;
  color: #a3f4e3;
  padding: 20px 26px;
  margin: 0 0 30px;
}
.snp-resume-card small,
.snp-resume-card strong {
  display: block;
}
.snp-resume-card small {
  font-size: 11px;
  letter-spacing: 0.12em;
}
.snp-resume-card strong {
  font-size: 24px;
  line-height: 1.4;
  color: #effcf7;
  margin-top: 5px;
}
.snp-catalog-empty {
  padding: 26px;
  border: 1px dashed #426171;
  border-radius: 18px;
  color: #b6ccda;
}
.snp-cardio-beat {
  transform-box: fill-box;
  transform-origin: center;
  animation: snp-heart-beat 1.3s ease-in-out infinite;
}
.snp-trace-draw {
  stroke-dasharray: 100;
  animation: snp-trace-draw 3s ease-out both;
}
.snp-conduction-path {
  animation: snp-conduction 2s linear infinite;
}
@keyframes snp-heart-beat {
  0%,
  45%,
  100% {
    transform: scale(1);
  }
  15%,
  30% {
    transform: scale(var(--beat, 0.94));
  }
}
@keyframes snp-trace-draw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes snp-conduction {
  to {
    stroke-dashoffset: -68;
  }
}
@media (min-width: 1201px) {
  .snp-main {
    --snp-reading: clamp(20px, 1.15vw, 26px);
    --snp-ui: clamp(17px, 1vw, 21px);
    --snp-small: clamp(14px, 0.8vw, 17px);
  }
  .snp-home,
  .snp-entry,
  .snp-lesson {
    width: 100%;
    max-width: none;
    padding-inline: clamp(28px, 2.2vw, 64px);
  }
  .snp-lesson {
    padding-top: 32px;
  }
  .snp-study-layout {
    grid-template-columns: minmax(0, 1fr) clamp(290px, 23%, 390px);
    gap: clamp(26px, 2.4vw, 60px);
  }
  .snp-study-sidebar {
    position: sticky;
    top: 120px;
  }
  .admin-bar .snp-study-sidebar {
    top: 152px;
  }
  .snp-lesson > h1 {
    font-size: clamp(34px, 2.3vw, 56px);
    line-height: 1.2;
    max-width: 36ch;
    margin-bottom: 32px;
  }
  .snp-lesson-meta,
  .snp-lesson-top > span,
  .snp-lesson-actions > span {
    font-size: var(--snp-small);
  }
  .snp-lesson-top {
    margin-bottom: 30px;
  }
  .snp-lesson-progress {
    height: 12px;
  }
  .snp-lesson-actions > span {
    max-width: 50ch;
  }
  .snp-learn {
    padding: clamp(28px, 2.2vw, 52px);
    grid-template-columns: minmax(0, 1fr) 30%;
    gap: 30px;
    min-height: 360px;
  }
  .snp-learn p {
    max-width: 64ch;
  }
  .snp-learn img {
    max-height: 380px;
  }
  .snp-option {
    font-size: var(--snp-reading) !important;
    padding: clamp(20px, 1.5vw, 32px);
    gap: 20px;
    border-radius: 18px;
    min-height: 88px;
  }
  .snp-option > span:first-child {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: var(--snp-small);
  }
  .snp-order-item > strong,
  .snp-match-item {
    font-size: var(--snp-ui) !important;
    line-height: 1.5;
  }
  .snp-order-item {
    padding: 18px;
  }
  .snp-order-actions button {
    width: 44px;
    height: 44px;
  }
  .snp-primary {
    font-size: var(--snp-ui) !important;
    min-height: 58px;
    padding-inline: 28px;
  }
  .snp-secondary,
  .snp-text-button,
  .snp-segmented button,
  .snp-model-tabs button {
    font-size: var(--snp-ui) !important;
  }
  .snp-takeaway,
  .snp-note,
  .snp-mechanism-legend,
  .snp-model-footer,
  .snp-system-note {
    font-size: var(--snp-small);
  }
  .snp-feedback {
    padding: 24px;
    font-size: var(--snp-ui);
  }
  .snp-feedback img {
    width: 96px;
    height: 96px;
    flex-basis: 96px;
  }
  .snp-system-canvas {
    min-height: 300px;
  }
  .snp-system-svg {
    width: 100%;
    max-height: none;
    max-width: 780px;
    margin: auto;
  }
  .snp-study-plan h2 {
    font-size: clamp(23px, 1.3vw, 30px);
  }
  .snp-study-plan li,
  .snp-study-recall p,
  .snp-study-recall summary {
    font-size: var(--snp-small);
  }
  .snp-combo-counter {
    font-size: var(--snp-small);
  }
  .snp-hero-description,
  .snp-topic-copy > p:not(.snp-eyebrow),
  .snp-catalog-heading p:not(.snp-eyebrow),
  .snp-entry-lead,
  .snp-welcome-hero > div > p:not(.snp-eyebrow) {
    font-size: var(--snp-reading);
    line-height: 1.65;
  }
  .snp-hero h1 {
    font-size: clamp(48px, 3.5vw, 76px);
    max-width: unset;
  }
  .snp-hero {
    padding: clamp(30px, 2.5vw, 60px);
    grid-template-columns: minmax(0, 1fr) 32%;
  }
  .snp-hero-art {
    max-width: 420px;
  }
  .snp-hero-tags span,
  .snp-save-state,
  .snp-crumb,
  .snp-route-counter,
  .snp-stat-row,
  .snp-topic-meta,
  .snp-topic-progress-label,
  .snp-catalog-count {
    font-size: var(--snp-small);
  }
  .snp-content-grid {
    grid-template-columns: minmax(0, 1fr) clamp(310px, 24%, 400px);
  }
  .snp-progress-card h2,
  .snp-coach h3,
  .snp-review-card h3 {
    font-size: clamp(24px, 1.4vw, 32px);
  }
  .snp-coach p,
  .snp-review-card p,
  .snp-source-card p,
  .snp-source-card a {
    font-size: var(--snp-ui);
    line-height: 1.6;
  }
  .snp-section-heading h2 {
    font-size: clamp(28px, 1.7vw, 40px);
  }
  .snp-ring {
    width: 190px;
    height: 190px;
  }
  .snp-ring strong {
    font-size: 40px;
  }
  .snp-ring span {
    font-size: 14px;
  }
  .snp-rail .snp-eyebrow,
  .snp-section-heading .snp-eyebrow {
    font-size: 12px;
  }
  .snp-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  .snp-topic-copy h3 {
    font-size: clamp(25px, 1.6vw, 36px);
  }
  .snp-topic-copy {
    padding: 28px;
  }
  .snp-topic-art {
    height: 240px;
  }
  .snp-learning-stats {
    gap: 22px;
  }
  .snp-learning-label,
  .snp-streak,
  .snp-xp,
  .snp-medals-button {
    font-size: var(--snp-small);
  }
  .snp-welcome-steps h2 {
    font-size: 26px;
  }
  .snp-welcome-steps p,
  .snp-catalog-note p {
    font-size: var(--snp-ui);
  }
  .snp-studio {
    width: 100%;
    min-height: 0;
  }
  .snp-podcast-caption p {
    font-size: var(--snp-reading);
  }
}
.snp-camera-controls button {
  min-height: 44px;
  font-size: var(--snp-small, 14px);
}
.snp-podcast-caption strong,
.snp-podcast-time,
.snp-podcast-controls select,
.snp-podcast-chapters button,
.snp-transcript {
  font-size: var(--snp-small, 14px);
}
.snp-transcript p {
  font-size: var(--snp-reading, 18px);
}
.snp-podcast-chapters button {
  min-width: 38px;
  min-height: 40px;
}
@media (min-width: 701px) and (max-width: 1200px) {
  .snp-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1700px) {
  .snp-topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .snp-system {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
    column-gap: 26px;
    align-items: start;
  }
  .snp-system .snp-model-tabs {
    grid-column: 1/-1;
  }
  .snp-system .snp-system-canvas {
    grid-column: 1;
    grid-row: 2;
  }
  .snp-system .snp-mechanism-result {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    margin: 0;
  }
  .snp-system .snp-mechanism-legend {
    grid-column: 1/-1;
  }
  .snp-system .snp-model-footer,
  .snp-system .snp-system-note {
    grid-column: 1/-1;
  }
  .snp-topic-art {
    height: 270px;
  }
  .snp-topic-art img {
    width: 280px;
    height: 280px;
  }
}
@media (min-width: 2400px) {
  .snp-topic-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@container (min-width:1000px) {
  .snp-node-row {
    --node-size: 124px;
    --card-width: 390px;
    --card-gap: 94px;
    height: 210px;
  }
  .snp-node-row.is-focused {
    height: 310px;
  }
  .is-focused .snp-node-button {
    --node-size: 168px;
  }
  .snp-active-card h3,
  .snp-node-copy h3 {
    font-size: clamp(24px, 1.3vw, 30px);
  }
  .snp-node-copy p,
  .snp-active-card p {
    font-size: 18px;
  }
  .snp-active-card button {
    font-size: 18px;
    min-height: 56px;
  }
  .snp-node-copy {
    left: calc(var(--node-x) + 90px);
  }
  .has-label-left .snp-node-copy {
    left: auto;
    right: calc(100% - var(--node-x) + 90px);
  }
}
@media (max-width: 1200px) {
  .snp-study-plan {
    display: none;
  }
  .snp-study-sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .snp-study-recall summary {
    font-size: 15px;
  }
  .snp-lesson {
    max-width: none;
    width: 100%;
  }
  .snp-option {
    font-size: 18px !important;
  }
  .snp-feedback,
  .snp-takeaway {
    font-size: 16px;
  }
}
@media (max-width: 700px) {
  .snp-lesson {
    padding-inline: 18px;
    padding-bottom: 24px;
  }
  .snp-lesson > h1 {
    font-size: 28px;
  }
  .snp-lesson-meta,
  .snp-lesson-top > span {
    font-size: 13px;
    letter-spacing: 0;
  }
  .snp-learn {
    padding: 22px;
    gap: 18px;
  }
  .snp-activity p,
  .snp-learn p {
    font-size: 17px;
    line-height: 1.75;
  }
  .snp-learn img {
    max-height: 210px;
  }
  .snp-study-sidebar {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .snp-lesson-actions {
    gap: 12px;
    padding-block: 12px max(12px, env(safe-area-inset-bottom));
    margin-top: 20px;
    flex-direction: column;
    align-items: stretch;
  }
  .snp-lesson-actions > span {
    max-width: none;
    font-size: 13px;
  }
  .snp-lesson-actions .snp-primary {
    min-height: 52px;
    font-size: 17px !important;
    width: 100%;
  }
  .snp-option {
    padding: 18px 15px;
    font-size: 17px !important;
    min-height: 74px;
  }
  .snp-order-item > strong,
  .snp-match-item {
    font-size: 15px !important;
  }
  .snp-feedback {
    gap: 12px;
    padding: 16px;
    font-size: 16px;
  }
  .snp-catalog-tools {
    gap: 12px;
  }
  .snp-catalog-tools label {
    min-width: 100%;
    flex: auto;
  }
  .snp-catalog-tools > span {
    padding: 0;
  }
  .snp-resume-card {
    padding: 18px;
    flex-wrap: wrap;
  }
  .snp-resume-card strong {
    font-size: 22px;
  }
  .snp-learning-label {
    display: none;
  }
  .snp-learning-bar {
    justify-content: flex-end;
    padding-inline: 16px;
  }
  .snp-learning-stats {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .snp-topic-copy > p:not(.snp-eyebrow) {
    font-size: 17px;
  }
  .snp-topic-copy h3 {
    font-size: 26px;
  }
  .snp-topic-meta,
  .snp-topic-progress-label {
    font-size: 13px;
  }
  .snp-model-tabs button {
    min-height: 44px;
  }
  .snp-study-recall p {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .snp-cardio-beat,
  .snp-trace-draw,
  .snp-conduction-path {
    animation: none !important;
  }
}