/* Design tokens. Defined on :root but every name is `--dyn-`-prefixed, so there
   is no cross-course collision; scoping them risks breaking dynamics visuals
   that render outside .dynamics-final-player (e.g. in the exam modal). */
:root {
  --dyn-ink: #20333b;
  --dyn-indigo: #426b7b;
  --dyn-cyan: #4f8f8b;
  --dyn-coral: #b96f61;
  --dyn-sand: #f1eadf;
  --dyn-paper: #fafaf7;
  --dyn-shadow: 0 .8rem 2rem rgba(41, 61, 69, .09);
}

.dynamics-final-player {
  background: #f7f8f5;
  color: var(--dyn-ink);
}

.dynamics-final-player .lesson-player-header {
  background: #3f6573;
  color: white;
}

.dynamics-final-player .lesson-player-header p,
.dynamics-final-player .lesson-player-header .overline,
.dynamics-final-player .lesson-saved-state span { color: #dfeaff; }
.dynamics-final-player .lesson-player-header > .text-button { color: #fff; }
.dynamics-final-player .lesson-saved-state { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.dynamics-final-player .lesson-player-progress i { background: var(--dyn-cyan); }
.dynamics-final-player .lesson-section-stage > h2 { color: #345866; font-size: clamp(1.45rem, 3vw, 2.15rem); }

.dynamics-final-player,
.dynamics-final-player .lesson-player-layout,
.dynamics-final-player .lesson-section-stage,
.dynamics-final-player .lesson-blocks,
.dynamics-final-player .course-simulation,
.dynamics-final-player figure {
  max-width: 100%;
  min-width: 0;
}
.dynamics-final-player .lesson-block-heading { color: var(--dyn-indigo); }

.dynamics-final-player .lesson-blocks {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.dynamics-final-player .lesson-blocks > * {
  max-width: 100%;
  min-width: 0;
}

.dynamics-final-player .lesson-block-paragraph,
.dynamics-final-player .lesson-definition,
.dynamics-final-player .worked-example,
.dynamics-final-player .display-formula-block,
.dynamics-final-player .lesson-question[data-lesson-question^="dynamicsHS."] {
  background: rgba(255,255,255,.96);
  border: 1px solid #dce3e2;
  border-radius: 1.05rem;
  box-shadow: 0 .7rem 1.8rem rgba(38, 56, 102, .08);
}

.dynamics-final-player .lesson-block-paragraph { font-size: 1.05rem; line-height: 1.85; padding: 1rem 1.15rem; }
.dynamics-final-player .lesson-definition { border-inline-start: .4rem solid var(--dyn-cyan); }
.dynamics-final-player .worked-example { border-inline-start: .4rem solid #d99c31; }
.dynamics-final-player .worked-example-illustration {
  background: #f4f7fb;
  border: 1px solid #d8e1eb;
  border-radius: .9rem;
  margin: 1rem 0 1.15rem;
  overflow: hidden;
}
.dynamics-final-player .worked-example-illustration img {
  display: block;
  height: auto;
  max-height: 28rem;
  object-fit: contain;
  width: 100%;
}
.dynamics-final-player .worked-example-illustration figcaption {
  color: #41506a;
  font-size: .94rem;
  line-height: 1.6;
  padding: .65rem .9rem .75rem;
  text-align: center;
}
.dynamics-final-player .display-formula-block { border-inline-start: .4rem solid var(--dyn-indigo); direction: rtl; }
.dynamics-final-player .math-display,
.dynamics-final-player .math-inline { direction: ltr; unicode-bidi: isolate; }
.dyn-svg-math-label { overflow: visible; pointer-events: none; }
.dyn-svg-math-label > div {
  align-items: center;
  color: #21324e;
  display: flex;
  font-family: "STIX Two Math", "Cambria Math", "Times New Roman", serif;
  font-size: 17px;
  font-weight: 800;
  height: 100%;
  justify-content: center;
  line-height: 1;
  text-align: center;
  width: 100%;
}
.dyn-svg-math-label .math-inline { margin: 0; vertical-align: middle; }
.dyn-svg-math-label.dyn-question-vector-label > div,
.dyn-svg-math-label.dyn-question-trig-label > div { font-size: 17px; }
.dyn-svg-math-label.is-focus > div { color: #c84152; font-size: 20px; }
.dynamics-final-player .lesson-callout { background: #eaf8f8; border-inline-start-color: var(--dyn-cyan); }
.dynamics-final-player .lesson-common-mistake { background: #fff0f1; border-color: #efb3b8; }
.dynamics-final-player .lesson-summary { background: #3f6573; color: white; }
.dynamics-final-player .lesson-summary p,
.dynamics-final-player .lesson-summary li { color: #f0f4ff; }

.dynamics-final-player .lesson-question[data-lesson-question^="dynamicsHS."] {
  border-top: .36rem solid var(--dyn-indigo);
  margin-block: 1.1rem;
  padding: clamp(1rem, 3vw, 1.45rem);
}
.dynamics-final-player .lesson-question-purpose { background: #e8f0f1; color: #345866; }
.dynamics-final-player .lesson-answer-options { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dynamics-final-player .lesson-answer-options button { min-height: 3.4rem; text-align: start; }
.dynamics-final-player .lesson-answer-options button:hover:not(:disabled) { border-color: var(--dyn-indigo); box-shadow: 0 .55rem 1.2rem rgba(50, 68, 138, .15); transform: translateY(-1px); }

.course-simulation[data-course-visualization^="dynamicsHS."] {
  background: transparent;
  border: 0;
  margin-block: 1.15rem;
  padding: 0;
}

.dyn-lab,
.dyn-illustration {
  background: #fff;
  border: 1px solid #d8e1e0;
  border-radius: 1.2rem;
  box-shadow: var(--dyn-shadow);
  direction: rtl;
  margin: 0;
  overflow: hidden;
}
.dyn-lab > header { align-items: start; background: #426b7b; color: white; display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 1.15rem; }
.dyn-lab > header span { color: #84ded8; font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.dyn-lab > header h3 { color: white; margin: .2rem 0 0; }
.dyn-lab > header p { color: #e8eeff; line-height: 1.55; margin: 0; max-width: 34rem; }
.dyn-stage { aspect-ratio: 2 / 1; background: radial-gradient(circle at 50% 14%, #fff 0 18%, transparent 54%), linear-gradient(#dceeff 0 56%, #d9cfba 56% 100%); isolation: isolate; min-height: 260px; overflow: hidden; perspective: 850px; position: relative; }
.dyn-world { inset: 0; position: absolute; transform-style: preserve-3d; }
.dyn-floor { background: linear-gradient(115deg, #cbb996, #eee1c5); bottom: -7%; height: 50%; left: -8%; position: absolute; transform: rotateX(66deg) translateZ(-12px); transform-origin: bottom; width: 116%; }
.dyn-floor::before { background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(57,66,82,.1) 59px 60px), repeating-linear-gradient(0deg, transparent 0 40px, rgba(57,66,82,.08) 41px 42px); content: ""; inset: 0; position: absolute; }
.dyn-incline { background: linear-gradient(160deg, #d9c59c, #aa8d5c); bottom: 18%; height: 22%; left: 20%; position: absolute; transform: rotate(-18deg) skewX(-18deg) translateZ(12px); transform-origin: left bottom; width: 58%; }
.dyn-incline::after { background: #80673f; bottom: -14px; content: ""; height: 14px; left: 0; position: absolute; transform: skewX(45deg); width: 100%; }
.dyn-body { --motion-x: 0px; background: linear-gradient(135deg, #ed7c65, #c74653); bottom: 27%; height: 66px; left: calc(45% + var(--motion-x)); position: absolute; transform: rotateY(-18deg) translateZ(35px); transform-style: preserve-3d; transition: left .18s linear, transform .25s ease; width: 94px; z-index: 4; }
.dyn-body::before { background: #f4a37f; content: ""; height: 25px; left: 0; position: absolute; top: -25px; transform: skewX(-42deg); transform-origin: bottom; width: 94px; }
.dyn-body::after { background: #963646; content: ""; height: 66px; position: absolute; right: -23px; top: -12px; transform: skewY(-48deg); transform-origin: left; width: 23px; }
.dyn-body i { background: rgba(255,255,255,.38); border-radius: .25rem; inset: 13px 18px auto; height: 12px; position: absolute; }
.dyn-body b { display: none; }
.dyn-body-b { background: linear-gradient(135deg, #43a9b0, #21717a); bottom: 18%; left: 64%; transform: rotateY(16deg) translateZ(28px); }
.dyn-body-b::before { background: #77cbd0; }
.dyn-body-b::after { background: #195860; }
.has-incline .dyn-body-a { bottom: 39%; left: 43%; transform: rotate(-18deg) rotateY(-15deg) translateZ(36px); }
.has-incline .dyn-body-b { bottom: 12%; left: 74%; transform: rotateY(12deg) translateZ(24px); }
.dyn-car { border-radius: .45rem .8rem .3rem .3rem; height: 52px; width: 122px; }
.dyn-car::before { border-radius: .5rem .5rem 0 0; left: 30px; top: -25px; width: 65px; }
.dyn-car i,
.dyn-car b { background: #15233d; border: 5px solid #313c50; border-radius: 50%; bottom: -14px; display: block; height: 24px; position: absolute; top: auto; width: 24px; }
.dyn-car i { left: 18px; }
.dyn-car b { right: 18px; }
.dyn-rope { border-block-start: 4px solid #745e48; bottom: 55%; left: 48%; position: absolute; transform: rotate(-5deg); transform-origin: left; width: 31%; z-index: 2; }
.dyn-pulley { background: radial-gradient(circle, #f6dfaa 0 25%, #6f5d47 27% 35%, #d7b978 37% 65%, #6a5843 67%); border-radius: 50%; bottom: 48%; height: 55px; left: 74%; position: absolute; width: 55px; z-index: 3; }
.dyn-rail { background: linear-gradient(#7d8b9d 0 20%, #dfe7ec 21% 58%, #667486 59%); bottom: 25%; height: 20px; left: 10%; position: absolute; transform: perspective(280px) rotateX(54deg); width: 80%; }
.dyn-stand { border-inline-start: 8px solid #4d5c70; border-block-start: 8px solid #4d5c70; bottom: 18%; height: 68%; left: 28%; position: absolute; width: 30%; }
.dyn-spring { background: repeating-linear-gradient(0deg, transparent 0 7px, #55657b 8px 11px); height: 48%; position: absolute; right: 10%; top: 5%; width: 22px; }
.dyn-ruler { background: #f5df8e; bottom: 21%; display: flex; height: 28px; justify-content: space-around; left: 20%; position: absolute; transform: rotateX(45deg); width: 55%; }
.dyn-ruler i { border-inline-start: 2px solid #526071; display: block; height: 12px; }
.dyn-ring { border: 10px solid #7b6650; border-radius: 50%; bottom: 38%; height: 58px; left: calc(50% - 29px); position: absolute; width: 58px; z-index: 4; }
.dyn-cable { background: #75614a; bottom: 48%; height: 4px; left: 50%; position: absolute; transform-origin: left; width: 34%; }
.dyn-cable.a { transform: rotate(-32deg); }
.dyn-cable.b { transform: rotate(212deg); }
.dyn-cable.c { transform: rotate(90deg); }
.dyn-elevator-shaft { background: linear-gradient(90deg, #6f7c8d 0 7%, #d5e0ea 8% 92%, #6f7c8d 93%); bottom: 0; height: 94%; left: 34%; position: absolute; width: 33%; }
.dyn-elevator { background: linear-gradient(135deg, #4d63a8, #23376f); bottom: 16%; height: 42%; left: 8%; position: absolute; transform: translateZ(25px); width: 84%; }
.dyn-overlay { direction: ltr; inset: 0; overflow: visible; pointer-events: none; position: absolute; width: 100%; z-index: 8; }
.dyn-vector line { stroke: var(--vector); stroke-linecap: round; stroke-width: 4.2; }
.dyn-vector.is-compact line { stroke-width: 2.7; }
.dyn-vector path { fill: var(--vector); }
.dyn-vector text { direction: ltr; fill: var(--vector); font: 700 18px/1 sans-serif; paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: 4px; text-anchor: middle; unicode-bidi: isolate; }
.dyn-axes line { stroke-width: 2.2; }
.dyn-axes text { font-size: 16px; }
.dyn-readout { background: #f1f4fb; display: grid; gap: .25rem 1rem; grid-template-columns: auto auto 1fr; padding: .75rem 1rem; }
.dyn-readout strong,
.dyn-readout span { direction: ltr; unicode-bidi: isolate; }
.dyn-readout p { margin: 0; }
.dyn-controls { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; }
.dyn-controls label { background: white; border: 1px solid #dce2ef; border-radius: .75rem; display: grid; gap: .55rem; padding: .65rem; }
.dyn-controls label span { display: flex; font-weight: 700; justify-content: space-between; }
.dyn-controls output { direction: ltr; unicode-bidi: isolate; }
.dyn-controls output.dyn-axis-direction-output { direction: rtl; unicode-bidi: plaintext; }
.dyn-controls input { accent-color: var(--dyn-indigo); min-height: 28px; touch-action: pan-x; width: 100%; }
.dyn-actions { display: flex; flex-wrap: wrap; gap: .65rem; padding: 0 1rem .8rem; }
.dyn-illustration figcaption { background: #f0f3fa; color: #46536b; line-height: 1.55; padding: .75rem 1rem; }
.dyn-bagrut-diagram { border-color: #d8bd7c; }

@media (max-width: 780px) {
  .dynamics-final-player .lesson-answer-options,
  .dyn-controls { grid-template-columns: 1fr; }
  .dyn-lab > header { display: block; }
  .dyn-lab > header p { margin-block-start: .5rem; }
  .dyn-stage { aspect-ratio: 4 / 3; min-height: 235px; }
  .dyn-readout { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dynamics-final-player *,
  .dyn-body,
}

/* Authored scientific-visual system (2026 rebuild). The photographic scene and
   the SVG physics model deliberately remain separate layers. */
.dynamics-final-player .lesson-block-image,
.dynamics-final-player figure.lesson-image {
  background: #eef2f8;
  border: 1px solid #d7dfed;
  border-radius: 1.15rem;
  box-shadow: var(--dyn-shadow);
  overflow: hidden;
}

.dynamics-final-player .lesson-block-image img,
.dynamics-final-player figure.lesson-image img,
.dynamics-final-player .lesson-image img {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.dynamics-final-player .lesson-block-image figcaption,
.dynamics-final-player figure.lesson-image figcaption,
.dynamics-final-player .lesson-image figcaption {
  background: #fff;
  color: #44516a;
  line-height: 1.6;
  padding: .8rem 1rem;
}

.dyn-lab,
.dyn-diagram,
.dyn-concept-check {
  background: #fff;
  border: 1px solid #d7e0df;
  border-radius: 1.2rem;
  box-shadow: var(--dyn-shadow);
  color: var(--dyn-ink);
  direction: rtl;
  margin: 1rem 0;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.dyn-lab > header {
  align-items: start;
  background: #426b7b;
  color: #fff;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 1.15rem;
}

.dyn-lab > header span,
.dyn-concept-check > header span {
  color: #d4eeea;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .035em;
}

.dyn-lab > header h3,
.dyn-concept-check > header h3 {
  color: inherit;
  margin: .18rem 0 0;
}

.dyn-lab > header p {
  color: #edf2ff;
  line-height: 1.55;
  margin: 0;
  max-width: 38rem;
}

.dyn-stage,
.dyn-diagram-stage {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.96), transparent 48%),
    linear-gradient(180deg, #eaf3fb, #f8f5ec);
  min-height: 0;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.dyn-simulation-raster,
.dyn-simulation-overlay {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.dyn-simulation-raster {
  display: block;
  object-fit: cover;
  z-index: 1;
}

.dyn-simulation-raster[hidden] { display: none; }

.dyn-simulation-overlay {
  pointer-events: none;
  z-index: 2;
}

.dyn-simulation-overlay .dyn-svg-stage {
  max-height: none;
}

.dyn-stage[data-raster-ready] .dyn-dynamic-scene-layer {
  filter: drop-shadow(0 5px 4px rgba(25, 37, 55, .24));
}

.dyn-raster-sprite {
  overflow: hidden;
  pointer-events: none;
}

.dyn-raster-sprite image {
  pointer-events: none;
}

.dyn-stage[data-raster-ready] .dyn-vector line {
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.dyn-stage[data-raster-ready] .dyn-physics-layer text {
  stroke-width: 3px;
}

.dyn-measure-span {
  fill: rgba(232, 95, 92, .72);
  stroke: #a63345;
  stroke-width: 2;
}

.dyn-dynamic-load {
  fill: #e85f5c;
  stroke: rgba(77, 31, 40, .7);
  stroke-width: 2;
}

.dyn-dynamic-mass {
  stroke: rgba(86, 61, 12, .65);
  stroke-width: 1.4;
}

.dyn-graph-panel {
  fill: rgba(255, 255, 255, .9);
  stroke: rgba(110, 129, 154, .65);
  stroke-width: 1.5;
}

.dyn-svg-stage {
  direction: ltr;
  display: block;
  height: 100%;
  max-height: min(68vh, 520px);
  overflow: visible;
  width: 100%;
}

.dyn-svg-stage text {
  direction: rtl;
  fill: var(--dyn-ink);
  font-family: Arial, "Noto Sans Hebrew", sans-serif;
  font-size: 17px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(255,255,255,.96);
  stroke-linejoin: round;
  stroke-width: 4px;
  text-anchor: middle;
  unicode-bidi: plaintext;
}

.dyn-svg-stage text.dyn-physics-symbol {
  direction: ltr;
  unicode-bidi: isolate;
}

.dyn-subscript {
  baseline-shift: sub;
  font-size: 72%;
}

.dyn-superscript {
  baseline-shift: super;
  font-size: 72%;
}

.dyn-scene-layer { opacity: .96; }
.dyn-physics-layer { pointer-events: none; }
.dyn-physics-layer text { font-size: 18px; }
.dyn-card { fill: rgba(255,255,255,.85); stroke: #c9d5e7; stroke-width: 2; }
.dyn-token-card { fill: #f6f8fc; stroke: #b9c8df; stroke-width: 2; }
.dyn-cart circle { fill: #25334a; stroke: #fff; stroke-width: 3; }
.dyn-cart rect,
.dyn-block rect { stroke: rgba(20,35,59,.45); stroke-width: 2; }
.dyn-block path { fill: none; stroke: #fff; stroke-linecap: round; stroke-width: 4; }
.dyn-grid line { stroke: #cbd7e9; stroke-width: 1.25; }
.dyn-chart-axes path,
.dyn-chart-axes > line,
.dyn-chart-axes g > line {
  fill: none;
  stroke: #344760;
  stroke-linecap: round;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}
.dyn-chart-axes .dyn-chart-zero { stroke: #697991; stroke-dasharray: 7 6; stroke-width: 1.6; }
.dyn-svg-stage text.dyn-chart-label { fill: #26384f; font-size: 16px; }
.dyn-svg-stage text.dyn-chart-tick-label { fill: #52627a; font-size: 13px; font-weight: 650; }
.dyn-guide,
.dyn-height,
.dyn-component-triangle { fill: none; stroke: #7f8da5; stroke-dasharray: 7 7; stroke-width: 2.2; }
.dyn-axis { fill: none; stroke: #263b78; stroke-linecap: round; stroke-width: 2.7; }
.dyn-tick { stroke: #4d5b6f; stroke-width: 2; }
.dyn-triangle,
.dyn-double-incline { fill: rgba(214,229,244,.55); stroke: #52647e; stroke-linejoin: round; stroke-width: 4; }
.dyn-right-angle,
.dyn-angle { fill: none; stroke: #df5b68; stroke-width: 3; }
.dyn-track,
.dyn-road,
.dyn-surface,
.dyn-incline,
.dyn-incline-line { fill: none; stroke: #52647e; stroke-linecap: round; stroke-width: 7; }
.dyn-road { stroke-dasharray: 18 10; }
.dyn-surface.rough { stroke-dasharray: 9 4; }
.dyn-surface.smooth { stroke: #7abec3; stroke-width: 5; }
.dyn-rope,
.dyn-support,
.dyn-stand-line { background: none; border: 0; fill: none; position: static; stroke: #6e5945; stroke-linecap: round; stroke-width: 5; width: auto; }
.dyn-rope.broken { stroke-dasharray: 14 8; }
.dyn-spring { background: none; fill: none; position: static; stroke: #52647e; stroke-linecap: round; stroke-width: 4; width: auto; }
.dyn-elastic { fill: none; stroke: #d9912e; stroke-dasharray: 8 5; stroke-width: 7; }
.dyn-contact { fill: none; stroke: #ca8b22; stroke-linecap: round; stroke-width: 6; }
.dyn-contact-point { fill: #fff4cf; stroke: #ca8b22; stroke-width: 3; }
.dyn-earth { fill: rgba(51,75,145,.12); stroke: #334b91; stroke-width: 5; }
.dyn-interaction { stroke: #fff; stroke-width: 3; }
.dyn-interaction.gravity { fill: #df5b68; }
.dyn-interaction.contact { fill: #168c98; }
.dyn-interaction.rope { fill: #ca8b22; }
.dyn-pulley { background: none; fill: #f1d59a; position: static; stroke: #655848; stroke-width: 7; }
.dyn-ring { background: none; fill: #fff; position: static; stroke: #6d5a47; stroke-width: 8; }
.dyn-point { fill: #df5b68; stroke: #fff; stroke-width: 3; }
.dyn-point-square { fill: #7059b7; stroke: #fff; stroke-width: 2; }
.dyn-trend,
.dyn-transition,
.dyn-curve { fill: none; stroke: #168c98; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.dyn-trend.purple,
.dyn-curve.purple { stroke: #7059b7; }
.dyn-curve.coral { stroke: #df5b68; }
.dyn-friction-drop {
  fill: none;
  stroke: #df5b68;
  stroke-dasharray: 7 5;
  stroke-width: 3.2;
}
.dyn-kinetic-point { fill: #7059b7; }
.dyn-open-point {
  fill: #fff;
  stroke: #7059b7;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.dyn-friction-graph .is-deemphasized { opacity: .28; }
.dyn-friction-graph path.is-focused {
  filter: drop-shadow(0 0 3px rgba(33, 50, 82, .24));
  stroke-width: 6;
}
.dyn-friction-graph circle.is-focused { stroke-width: 5; }
.dyn-graph-reference {
  fill: none;
  stroke: #6d7890;
  stroke-dasharray: 9 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
}
.dyn-graph-reference-point {
  fill: #fff;
  stroke: #6d7890;
  stroke-width: 3;
}
.dyn-svg-stage text.dyn-graph-reference-label {
  fill: #53627a;
  font-size: 14px;
}
.dyn-graph-state-guide,
.dyn-graph-state-transition {
  fill: none;
  stroke: #9b6b13;
  stroke-dasharray: 5 5;
  stroke-width: 2;
}
.dyn-graph-state-transition { stroke-width: 3.2; }
.dyn-graph-state-point {
  fill: #fff;
  stroke: #ca8b22;
  stroke-width: 4;
}
.dyn-graph-state-point.static { stroke: #168c98; }
.dyn-graph-state-point.static-limit { stroke: #df5b68; }
.dyn-graph-state-point.kinetic { stroke: #7059b7; }
.dyn-graph-measured-range {
  fill: none;
  stroke: #168c98;
  stroke-linecap: round;
  stroke-width: 7;
}
.dyn-svg-stage text.dyn-graph-state-label {
  fill: #344760;
  font-size: 14px;
}
.dyn-svg-stage text.dyn-graph-state-value {
  fill: #6e541c;
  font-size: 12px;
}
.dyn-svg-stage text.dyn-graph-state-order {
  fill: #26384f;
  font-size: 11px;
  stroke-width: 2px;
}
.dyn-svg-stage text.dyn-graph-missing-label {
  fill: #b64251;
  font-size: 20px;
}
.dyn-current-point {
  fill: #fff;
  stroke: #ca8b22;
  stroke-width: 4;
}
.dyn-threshold-guides {
  fill: none;
  stroke: #6d7890;
  stroke-dasharray: 5 5;
  stroke-width: 1.8;
}
.dyn-micro-surface {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 8;
}
.dyn-micro-surface.upper { stroke: #334b91; }
.dyn-micro-surface.lower { stroke: #168c98; }
.dyn-dynamic-rope {
  stroke: #7a624d;
  stroke-dasharray: 8 3;
  stroke-linecap: round;
  stroke-width: 5;
}
.dyn-dynamic-push-rod {
  stroke: #52647e;
  stroke-linecap: round;
  stroke-width: 8;
}
.dyn-simulation-equation-card rect {
  fill: rgba(255, 255, 255, .92);
  stroke: rgba(38, 56, 79, .3);
  stroke-width: 1.6;
}
.dyn-svg-stage text.dyn-sim-equation { font-size: 15px; }
.dyn-curve.teal { stroke: #168c98; }
.dyn-highlight,
.dyn-fbd-circle { fill: rgba(255,255,255,.22); stroke: #df5b68; stroke-dasharray: 8 6; stroke-width: 3; }
.dyn-system-boundary { fill: rgba(51,75,145,.06); stroke: #334b91; stroke-dasharray: 10 7; stroke-width: 3; }
.dyn-svg-stage text.dyn-system-label { fill: #334b91; font-size: 20px; }
.dyn-shaft { fill: #dae3ed; stroke: #637087; stroke-width: 4; }
.dyn-check { fill: #e4f5f3; stroke: #168c98; stroke-width: 3; }
.dyn-checkmark { fill: none; stroke: #168c98; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.dyn-value { direction: ltr !important; font-size: 28px !important; unicode-bidi: isolate !important; }
.dyn-vector line { stroke-linecap: round; stroke-width: 4.5; vector-effect: non-scaling-stroke; }
.dyn-vector path { stroke: none; }
.dyn-vector-coral line { stroke: #df5b68; }
.dyn-vector-coral path { fill: #df5b68; }
.dyn-vector-teal line { stroke: #168c98; }
.dyn-vector-teal path { fill: #168c98; }
.dyn-vector-purple line { stroke: #7059b7; }
.dyn-vector-purple path { fill: #7059b7; }
.dyn-vector-gold line { stroke: #ca8b22; }
.dyn-vector-gold path { fill: #ca8b22; }
.dyn-vector-indigo line { stroke: #334b91; }
.dyn-vector-indigo path { fill: #334b91; }

.dyn-readout {
  align-items: center;
  background: #eef3f2;
  border-block: 1px solid #d9e2e1;
  display: grid;
  gap: .4rem 1rem;
  grid-template-columns: auto auto minmax(12rem, 1fr);
  min-height: 3.75rem;
  padding: .75rem 1rem;
}

.dyn-readout strong,
.dyn-readout span { direction: ltr; font-size: 1.05rem; unicode-bidi: isolate; }
.dyn-readout p { line-height: 1.55; margin: 0; }
.dyn-controls { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; }
.dyn-controls label { background: #fff; border: 1px solid #d8e0ed; border-radius: .8rem; display: grid; gap: .55rem; min-width: 0; padding: .7rem; }
.dyn-controls label span { display: flex; font-weight: 750; gap: .6rem; justify-content: space-between; }
.dyn-controls output { direction: ltr; unicode-bidi: isolate; }
.dyn-controls input[type="range"] { accent-color: var(--dyn-indigo); cursor: pointer; min-height: 44px; touch-action: pan-y; width: 100%; }
.dyn-actions { display: flex; flex-wrap: wrap; gap: .65rem; padding: 0 1rem .85rem; }
.dyn-actions button,
.dyn-concept-check button { min-height: 44px; }

.dyn-diagram figcaption {
  background: #fff;
  border-block-start: 1px solid #d8e0ed;
  display: grid;
  gap: .22rem;
  line-height: 1.55;
  padding: .78rem 1rem;
}
.dyn-diagram figcaption strong { color: #345866; }
.dyn-diagram figcaption span { color: #59677b; }
.dyn-bagrut-diagram { border-color: #d6b96c; }
.dyn-bagrut-diagram figcaption { background: #fffaf0; }

.dyn-hybrid-diagram {
  background: #fff;
  border: 1px solid #d7e0df;
  border-radius: 1.2rem;
  box-shadow: var(--dyn-shadow);
  color: var(--dyn-ink);
  direction: rtl;
  margin: 1rem 0;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.dyn-hybrid-stage {
  aspect-ratio: 16 / 9;
  background: radial-gradient(circle at 50% 35%, #fff, #e7edf4);
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  width: 100%;
}

.dyn-hybrid-stage > img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.dyn-hybrid-overlay {
  direction: ltr;
  height: 100%;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.dyn-hybrid-overlay [hidden] { display: none; }

.dyn-direction-angle-lab {
  background: #fff;
  border: 1px solid #d7e0df;
  border-radius: 1.2rem;
  box-shadow: var(--dyn-shadow);
  direction: rtl;
  margin: 1rem 0;
  overflow: hidden;
}

.dyn-direction-angle-lab > header {
  align-items: start;
  background: #426b7b;
  color: #fff;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(12rem, .7fr) minmax(18rem, 1.3fr);
  padding: 1rem 1.15rem;
}

.dyn-direction-angle-lab > header span {
  color: #d4eeea;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .035em;
}

.dyn-direction-angle-lab > header h3 {
  color: inherit;
  margin: .18rem 0 0;
}

.dyn-direction-angle-lab > header p {
  color: #edf7f6;
  line-height: 1.65;
  margin: 0;
}

.dyn-direction-angle-stage {
  aspect-ratio: 16 / 9;
  background: radial-gradient(circle at 50% 48%, #fff 0 12%, #f2f7fb 58%, #e5edf5 100%);
  cursor: grab;
  direction: ltr;
  outline: none;
  position: relative;
  touch-action: none;
  user-select: none;
}

.dyn-direction-angle-stage:active { cursor: grabbing; }
.dyn-direction-angle-stage:focus-visible { box-shadow: inset 0 0 0 4px #168c98; }
.dyn-direction-angle-stage svg { display: block; height: 100%; width: 100%; }
.dyn-direction-angle-grid line { stroke: #334b91; stroke-linecap: round; stroke-width: 2.5; }
.dyn-direction-angle-grid text,
.dyn-direction-angle-origin-label {
  direction: ltr;
  fill: #263a66;
  font: 750 17px/1 sans-serif;
  paint-order: stroke;
  stroke: rgba(255,255,255,.95);
  stroke-width: 4px;
  text-anchor: middle;
}
.dyn-direction-angle-reference { stroke: #91a1bb; stroke-dasharray: 7 6; stroke-width: 2.5; }
.dyn-direction-angle-arrow { stroke: #df5b68; stroke-linecap: round; stroke-width: 6; }
.dyn-direction-angle-origin { fill: #14233b; }
.dyn-direction-angle-handle { fill: #fff; stroke: #df5b68; stroke-width: 5; }
.dyn-direction-angle-arc { fill: none; stroke: #168c98; stroke-linecap: round; stroke-width: 4; }
.dyn-direction-angle-arc-label {
  direction: rtl;
  fill: #0f6e77;
  font: 750 16px/1.2 sans-serif;
  paint-order: stroke;
  stroke: rgba(255,255,255,.96);
  stroke-width: 5px;
  text-anchor: middle;
  unicode-bidi: plaintext;
}

.dyn-direction-angle-readout {
  align-items: center;
  background: #eef3f2;
  border-block: 1px solid #d9e2e1;
  display: flex;
  gap: .65rem;
  justify-content: center;
  padding: .8rem 1rem;
}

.dyn-direction-angle-readout span { color: #405066; font-weight: 700; }
.dyn-direction-angle-readout strong { color: #a93649; font-size: 1.45rem; unicode-bidi: isolate; }
.dyn-direction-angle-instruction { color: #526077; line-height: 1.55; margin: .8rem 1rem .25rem; }
.dyn-direction-angle-actions { padding: .15rem 1rem .9rem; }
.dyn-direction-angle-actions button { min-height: 44px; }

@media (max-width: 780px) {
  .dyn-direction-angle-lab > header { grid-template-columns: 1fr; }
  .dyn-direction-angle-stage { aspect-ratio: 4 / 3; }
  .dyn-direction-angle-arc-label { font-size: 14px; }
}
.dyn-hybrid-overlay .dyn-vector line { stroke-width: 2.7; }
.dyn-hybrid-overlay text {
  direction: ltr;
  fill: var(--dyn-ink);
  font-family: Arial, "Noto Sans Hebrew", sans-serif;
  font-size: 16px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(255,255,255,.97);
  stroke-linejoin: round;
  stroke-width: 3.5px;
  text-anchor: middle;
  unicode-bidi: isolate;
}
.dyn-hybrid-overlay .dyn-hebrew-label {
  direction: rtl;
  unicode-bidi: plaintext;
}
.dyn-hybrid-overlay .dyn-trig-side {
  opacity: .26;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
}
.dyn-hybrid-overlay .dyn-trig-side.is-active {
  opacity: .94;
  stroke-width: 5.2;
}
.dyn-hybrid-overlay .dyn-overlay-card rect,
.dyn-hybrid-overlay .dyn-ratio-formula rect {
  fill: rgba(255,255,255,.9);
  stroke: rgba(38,56,79,.22);
  stroke-width: 1.4;
}
.dyn-hybrid-overlay .dyn-ratio-formula > line {
  stroke: #14233b;
  stroke-width: 2.2;
}
.dyn-hybrid-overlay .dyn-ratio-name { font-size: 19px; }
.dyn-hybrid-overlay .dyn-ratio-term { font-size: 18px; }
.dyn-hybrid-overlay .dyn-ratio-meaning,
.dyn-hybrid-overlay .dyn-reference-note { font-size: 14px; }
.dyn-hybrid-overlay .dyn-legend-symbol { font-size: 20px; }
.dyn-hybrid-overlay .dyn-legend-symbol.opposite { fill: #7059b7; }
.dyn-hybrid-overlay .dyn-legend-symbol.adjacent { fill: #168c98; }
.dyn-hybrid-overlay .dyn-legend-symbol.hypotenuse { fill: #df5b68; }
.dyn-hybrid-overlay .dyn-reconstruction-formula { font-size: 17px; }
.dyn-hybrid-guides circle,
.dyn-hybrid-guides path {
  fill: rgba(255,255,255,.05);
  stroke: rgba(38,56,79,.72);
  stroke-dasharray: 6 6;
  stroke-width: 2;
}
.dyn-hybrid-highlight {
  fill: rgba(255,255,255,.12);
  stroke: #df5b68;
  stroke-dasharray: 7 6;
  stroke-width: 2.4;
}
.dyn-hybrid-interactions {
  fill: none;
  stroke: rgba(38,56,79,.82);
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  stroke-width: 2.1;
}
.dyn-zero-marker { fill: #fff; stroke: #334b91; stroke-width: 2.4; }
.dyn-hybrid-overlay .dyn-fbd-step-label {
  fill: #21344f;
  font-size: 13px;
  font-weight: 850;
}
.dyn-fbd-system-boundary {
  fill: rgba(255,255,255,.04);
  stroke: #df5b68;
  stroke-dasharray: 7 6;
  stroke-width: 2.2;
}
.dyn-fbd-body-point {
  fill: #14233b;
  stroke: #fff;
  stroke-width: 3;
}
.dyn-hybrid-overlay .dyn-fbd-mask rect {
  fill: #fff;
}

.dyn-hybrid-diagram figcaption {
  align-items: center;
  background: #fff;
  border-block-start: 1px solid #d8e0ed;
  display: flex;
  gap: .8rem;
  justify-content: space-between;
  line-height: 1.55;
  padding: .78rem 1rem;
}
.dyn-hybrid-diagram figcaption > div { display: grid; gap: .22rem; }
.dyn-hybrid-diagram figcaption strong { color: #345866; }
.dyn-hybrid-diagram figcaption span { color: #59677b; }
.dyn-hybrid-diagram figcaption button { flex: 0 0 auto; min-height: 44px; }

.dyn-vector-sequence-panel {
  background: #f7f9fc;
  border-block-start: 1px solid #d8e0ed;
  display: grid;
  gap: .7rem;
  padding: .8rem 1rem;
}
.dyn-vector-stage-list {
  display: flex;
  gap: .5rem;
  max-width: 100%;
  overflow-x: auto;
  padding-block-end: .2rem;
  scrollbar-width: thin;
}
.dyn-vector-stage-list button {
  background: #fff;
  border: 1px solid #c8d4e2;
  border-radius: 999px;
  color: #345866;
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: .9rem;
  font-weight: 750;
  min-height: 44px;
  padding: .55rem .85rem;
}
.dyn-vector-stage-list button[aria-current="step"] {
  background: var(--dyn-indigo);
  border-color: var(--dyn-indigo);
  color: #fff;
}
.dyn-vector-stage-summary {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  justify-content: space-between;
}
.dyn-vector-stage-summary strong { color: #345866; }
.dyn-vector-stage-summary span { color: #59677b; font-weight: 750; }
.dyn-vector-sequence-controls { display: flex; flex-wrap: wrap; gap: .65rem; }
.dyn-vector-sequence-controls button { min-height: 44px; }
.dyn-hybrid-overlay .dyn-vector-sign-note { font-size: 15px; }

.dyn-visual-sequence {
  background: #fff;
  border: 1px solid #d8dfeb;
  border-radius: 1.1rem;
  box-shadow: 0 14px 32px rgba(35, 49, 78, .1);
  min-width: 0;
  overflow: hidden;
}

.dyn-visual-sequence > header {
  align-items: start;
  background: linear-gradient(135deg, #24385c, #426b7b);
  color: #fff;
  display: grid;
  gap: .8rem 1.3rem;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, .8fr);
  padding: 1rem 1.15rem;
}

.dyn-visual-sequence > header span {
  color: #bce9e7;
  display: block;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .04em;
  margin-block-end: .2rem;
}

.dyn-visual-sequence > header h3 { color: #fff; font-size: 1.08rem; margin: 0; }
.dyn-visual-sequence > header p { color: rgba(255,255,255,.88); line-height: 1.55; margin: 0; }

.dyn-visual-sequence > nav {
  background: #f6f8fc;
  border-block-end: 1px solid #d8dfeb;
  display: flex;
  gap: .45rem;
  max-width: 100%;
  overflow-x: auto;
  padding: .7rem;
  scrollbar-width: thin;
}

.dyn-visual-sequence > nav button {
  align-items: center;
  background: #fff;
  border: 1px solid #cfd8e7;
  border-radius: 999px;
  color: #40516b;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: .4rem;
  min-height: 42px;
  padding: .4rem .72rem;
}

.dyn-visual-sequence > nav button b {
  align-items: center;
  background: #e7edf5;
  border-radius: 50%;
  display: inline-flex;
  height: 1.55rem;
  justify-content: center;
  width: 1.55rem;
}

.dyn-visual-sequence > nav button.is-active {
  background: #e8f5f4;
  border-color: #168c98;
  color: #155e67;
  font-weight: 800;
}

.dyn-visual-sequence > nav button.is-active b { background: #168c98; color: #fff; }
.dyn-sequence-stage { background: #eef2f7; min-height: 18rem; min-width: 0; }

.dyn-sequence-gate {
  align-content: center;
  background: radial-gradient(circle at 50% 42%, #fff, #e8eef5);
  color: #53627a;
  display: grid;
  gap: .55rem;
  justify-items: center;
  min-height: 18rem;
  padding: 2rem;
  text-align: center;
}

.dyn-sequence-gate strong { color: #263d61; font-size: 1.05rem; }
.dyn-sequence-gate > span:last-child { line-height: 1.6; max-width: 35rem; }
.dyn-sequence-gate-symbol {
  background: linear-gradient(145deg, #e6f5f3, #fff);
  border: 2px solid #78b7b8;
  border-radius: 50%;
  height: 3.2rem;
  position: relative;
  width: 3.2rem;
}
.dyn-sequence-gate-symbol::before,
.dyn-sequence-gate-symbol::after {
  background: #168c98;
  border-radius: 999px;
  content: "";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
.dyn-sequence-gate-symbol::before { height: 1.25rem; inset-block-start: .72rem; width: .24rem; }
.dyn-sequence-gate-symbol::after { height: .24rem; inset-block-start: 1.75rem; width: .24rem; }

.dyn-sequence-raster,
.dyn-sequence-scientific,
.dyn-sequence-equation,
.dyn-sequence-data { margin: 0; min-width: 0; }

.dyn-raster-frame {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: radial-gradient(circle at 50% 35%, #fff, #e7edf4);
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.dyn-raster-frame img {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.dyn-annotated-frame {
  isolation: isolate;
  position: relative;
}

.dyn-annotated-frame > img {
  inset: 0;
  position: absolute;
  z-index: 1;
}

.dyn-annotated-overlay {
  inset: 0;
  max-height: none;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.dyn-annotated-overlay .dyn-vector {
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.98)) drop-shadow(0 1px 2px rgba(16,28,45,.38));
}

.dyn-annotated-overlay .dyn-vector line {
  stroke-width: 3.7;
}

.dyn-annotated-overlay .dyn-vector text,
.dyn-annotated-overlay text.dyn-physics-symbol {
  font-size: 16px;
  font-weight: 850;
  paint-order: stroke fill;
  stroke: rgba(255,255,255,.98);
  stroke-width: 5px;
}

.dyn-annotated-overlay .dyn-overlay-origin {
  fill: #fff;
  stroke: #334b91;
  stroke-width: 2.5;
}

.dyn-annotated-overlay text.dyn-overlay-state {
  fill: #20333b;
  font-size: 17px;
}

.dyn-annotated-axis-layer .dyn-vector-indigo line {
  stroke-width: 3;
}

.dyn-sequence-raster figcaption,
.dyn-sequence-scientific figcaption,
.dyn-sequence-equation figcaption,
.dyn-sequence-data figcaption {
  background: #fff;
  border-block-start: 1px solid #d8dfeb;
  display: grid;
  gap: .22rem;
  line-height: 1.55;
  padding: .78rem 1rem;
}

.dyn-sequence-raster figcaption strong,
.dyn-sequence-scientific figcaption strong,
.dyn-sequence-equation figcaption strong,
.dyn-sequence-data figcaption strong { color: #345866; }

.dyn-sequence-raster figcaption span,
.dyn-sequence-scientific figcaption span,
.dyn-sequence-equation figcaption span,
.dyn-sequence-data figcaption span { color: #59677b; }

.dyn-sequence-scientific .dyn-diagram-stage {
  aspect-ratio: 16 / 9;
  background: #fbfcff;
  overflow: hidden;
  width: 100%;
}

.dyn-bagrut-source .dyn-source-apparatus { fill: none; stroke: #5a687b; stroke-linejoin: round; stroke-width: 7; }
.dyn-bagrut-source .dyn-basket { fill: rgba(223,91,104,.15); stroke: #8c4c55; stroke-width: 4; }
.dyn-cutaway-box { fill: rgba(22,140,152,.12); stroke: #168c98; stroke-width: 5; }
.dyn-fbd-node { fill: #fff; stroke: #536781; stroke-width: 4; }
.dyn-empty-force-slots path { fill: none; stroke: #a9b5c6; stroke-dasharray: 7 7; stroke-linecap: round; stroke-width: 2.5; }

.dyn-source-table-wrap {
  align-items: center;
  background: linear-gradient(145deg, #f8faff, #eef5f4);
  display: flex;
  justify-content: center;
  min-height: 22rem;
  overflow-x: auto;
  padding: 1.2rem;
}

.dyn-source-table {
  background: #fff;
  border-collapse: separate;
  border-radius: .85rem;
  border-spacing: 0;
  box-shadow: 0 10px 24px rgba(35,49,78,.1);
  direction: ltr;
  min-width: min(34rem, 100%);
  overflow: hidden;
}

.dyn-source-table caption { color: #334b91; font-weight: 850; padding: .75rem; }
.dyn-source-table th,
.dyn-source-table td { border-block-start: 1px solid #dce3ed; padding: .72rem 1rem; text-align: center; }
.dyn-source-table th { background: #334b91; border: 0; color: #fff; }

.dyn-source-choices {
  background: #f6f8fc;
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 1rem;
}

.dyn-source-choices figure { background: #fff; border: 1px solid #d7dfeb; border-radius: .8rem; margin: 0; overflow: hidden; }
.dyn-source-choices svg { display: block; width: 100%; }
.dyn-source-choices figcaption { background: #fff; border-block-start: 1px solid #e0e6ef; font-weight: 850; padding: .4rem; text-align: center; }
.dyn-mini-axis { fill: none; stroke: #3e4d61; stroke-width: 2; }
.dyn-mini-curve { fill: none; stroke-linecap: round; stroke-width: 3; }
.dyn-mini-curve.teal { stroke: #168c98; }
.dyn-mini-curve.coral { stroke: #df5b68; }

.dyn-equation-board {
  align-items: center;
  background: radial-gradient(circle at center, #fff, #eef3f8);
  color: #213454;
  direction: ltr;
  display: flex;
  font-size: clamp(1.35rem, 4vw, 2.35rem);
  justify-content: center;
  min-height: 20rem;
  padding: 2rem;
  unicode-bidi: isolate;
}

.dyn-solution-board {
  background: linear-gradient(155deg, #f8fafc, #eef4f3);
  color: #213454;
  direction: rtl;
  display: grid;
  gap: 1rem;
  min-height: 20rem;
  padding: clamp(.85rem, 2.4vw, 1.35rem);
}

.dyn-solution-steps {
  display: grid;
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dyn-solution-steps > li {
  align-items: start;
  background: rgba(255,255,255,.96);
  border: 1px solid #d5dfea;
  border-radius: .9rem;
  display: grid;
  gap: .75rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: .8rem;
}

.dyn-solution-step-number {
  align-items: center;
  background: #426b7b;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: .85rem;
  font-weight: 900;
  height: 1.8rem;
  justify-content: center;
  width: 1.8rem;
}

.dyn-solution-steps h4 {
  color: #345866;
  font-size: 1rem;
  margin: .2rem 0 .55rem;
}

.dyn-solution-steps p {
  color: #4d5c70;
  line-height: 1.65;
  margin: 0 0 .55rem;
}

.dyn-solution-equations {
  display: grid;
  gap: .45rem;
}

.dyn-solution-equation {
  background: #f7f9fd;
  border-inline-start: .22rem solid #168c98;
  border-radius: .55rem;
  color: #172e4c;
  font-size: clamp(1rem, 2.4vw, 1.22rem);
  overflow-x: auto;
  padding: .55rem .7rem;
  text-align: center;
  unicode-bidi: isolate;
}

.dyn-solution-equation .math-display {
  margin: 0;
  min-width: max-content;
}

.dyn-solution-answer {
  background: #e5f4ef;
  border: 1px solid #b9ddd1;
  border-radius: .9rem;
  padding: .85rem 1rem;
}

.dyn-solution-answer strong { color: #1d6656; }
.dyn-solution-answer p { line-height: 1.7; margin: .35rem 0 0; }

.dyn-solution-check {
  background: #fff8e8;
  border-inline-start: .3rem solid #ca8b22;
  border-radius: .7rem;
  color: #5f532e;
  line-height: 1.65;
  margin: 0;
  padding: .72rem .85rem;
}

.dyn-data-chips {
  align-content: center;
  background: linear-gradient(145deg, #f8faff, #edf5f4);
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 20rem;
  padding: 1.2rem;
}

.dyn-data-chips span { background: #fff; border: 1px solid #d3dce9; border-radius: .85rem; display: grid; gap: .35rem; padding: .85rem; text-align: center; }
.dyn-data-chips b { color: #334b91; }
.dyn-data-chips em { color: #14233b; font-size: 1.1rem; font-style: normal; }

.dyn-image-error { color: #7b3942; font-weight: 800; padding: 2rem; text-align: center; }
.dyn-visual-sequence > footer { align-items: center; background: #fff; border-block-start: 1px solid #d8dfeb; display: flex; justify-content: space-between; padding: .65rem .85rem; }
.dyn-visual-sequence > footer button { min-height: 42px; }
.dyn-visual-sequence > footer span { color: #53627a; font-size: .9rem; font-weight: 750; }
.dyn-sequence-lock { background: #fff9e9; border-block-start: 1px solid #ead9a7; color: #665525; margin: 0; padding: .65rem 1rem; }
.dyn-visual-sequence.is-author-preview > header { background: linear-gradient(135deg, #304a68, #3b776d); }
.dyn-visual-sequence.is-author-preview .dyn-sequence-lock {
  background: #e8f5ef;
  border-block-start-color: #bddfd0;
  color: #235f50;
}

.dyn-stage:focus-visible,
.dyn-diagram-stage:focus-visible,
.dyn-hybrid-stage:focus-visible {
  outline: 3px solid var(--dyn-indigo);
  outline-offset: -3px;
}

.dyn-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.dyn-question-raster,
.dyn-question-evidence-graph {
  background: #fff;
  border: 1px solid #d7e0df;
  border-radius: 1.1rem;
  box-shadow: var(--dyn-shadow);
  color: var(--dyn-ink);
  direction: rtl;
  margin: 1rem 0;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.dyn-question-raster-stage,
.dyn-question-evidence-graph-stage {
  aspect-ratio: 16 / 9;
  background: #f4f7f8;
  min-height: 0;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  width: 100%;
}

.dyn-question-raster-image {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.dyn-question-raster-overlay {
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.dyn-question-raster-annotation-overlay {
  height: 100%;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.dyn-question-raster-annotation-overlay line,
.dyn-question-raster-annotation-overlay path,
.dyn-question-raster-annotation-overlay circle {
  vector-effect: non-scaling-stroke;
}
.dyn-question-raster-annotation-overlay marker path {
  fill: #173e55;
  stroke: none;
}
.dyn-question-annotation-connector line {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .9));
  stroke: rgba(23, 62, 85, .9);
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  stroke-width: 2.25;
}
.dyn-question-annotation-connector circle {
  fill: #fff;
  stroke: #173e55;
  stroke-width: 2;
}
.dyn-question-annotation-angle {
  fill: rgba(255, 255, 255, .14);
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .95));
  stroke: #135f75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}
.dyn-question-annotation-vector line,
.dyn-question-annotation-dimension {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .95));
  stroke: #173e55;
  stroke-linecap: round;
  stroke-width: 3.25;
}
.dyn-question-annotation-vector circle {
  fill: #fff;
  stroke: #173e55;
  stroke-width: 2.5;
}
.dyn-question-annotation-dimension {
  stroke-dasharray: 9 5;
}
.dyn-question-raster-math-overlay {
  direction: ltr;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.dyn-question-raster-math-label {
  align-items: center;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(52, 78, 102, .2);
  border-radius: .55rem;
  box-shadow: 0 2px 8px rgba(25, 45, 65, .1);
  color: #1f344a;
  display: inline-flex;
  font-size: clamp(.67rem, 1.35vw, 1.04rem);
  font-weight: 500;
  line-height: 1;
  max-width: 34%;
  min-height: 1.65em;
  padding: .24em .48em;
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.dyn-question-raster-math-label.anchor-start { transform: translate(0, -50%); }
.dyn-question-raster-math-label.anchor-end { transform: translate(-100%, -50%); }
.dyn-question-raster-math-label.is-body,
.dyn-question-raster-math-label.is-sensor,
.dyn-question-raster-math-label.is-vector {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(31, 52, 74, .16);
  box-shadow: none;
  font-size: clamp(.73rem, 1.55vw, 1.15rem);
}
.dyn-question-raster-math-label.is-angle,
.dyn-question-raster-math-label.is-axis,
.dyn-question-raster-math-label.is-panel {
  background: rgba(246, 250, 252, .92);
  border-color: rgba(42, 116, 139, .22);
  box-shadow: none;
}
.dyn-question-raster-math-label .math-inline,
.dyn-question-raster-math-label .math-expression {
  direction: ltr;
  unicode-bidi: isolate;
}
.dyn-question-raster[data-image-state="error"] .dyn-question-raster-overlay { display: none; }
.dyn-question-raster[data-image-state="error"] .dyn-question-raster-annotation-overlay { display: none; }
.dyn-question-raster[data-image-state="error"] .dyn-question-raster-math-overlay { display: none; }
.dyn-question-trig-card rect {
  fill: rgba(255, 255, 255, .9);
  stroke: rgba(51, 75, 145, .28);
  stroke-width: 2;
}
.dyn-question-trig-triangle {
  fill: rgba(22, 140, 152, .08);
  stroke: #334b91;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}
.dyn-question-trig-right-angle,
.dyn-question-trig-angle {
  fill: none;
  stroke: #df5b68;
  stroke-linecap: round;
  stroke-width: 4;
}
.dyn-question-trig-label {
  direction: ltr;
  fill: #21324e;
  font-size: 21px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-width: 5px;
  text-anchor: middle;
  unicode-bidi: isolate;
}
.dyn-question-trig-note { direction: rtl; font-size: 17px; }
.dyn-question-trig-calculator > rect:first-child { fill: #334b91; stroke: #21324e; stroke-width: 3; }
.dyn-question-trig-calculator > rect:nth-child(2) { fill: #edf8f3; stroke: #b7cac4; stroke-width: 2; }
.dyn-question-trig-calculator circle { fill: #f7f9fc; stroke: #b9c4d6; stroke-width: 2; }
.dyn-question-trig-display { font-family: ui-monospace, Consolas, monospace; font-size: 28px; }

.dyn-question-vector-card rect {
  fill: rgba(255, 255, 255, .92);
  stroke: rgba(51, 75, 145, .28);
  stroke-width: 2;
}
.dyn-question-vector-label {
  direction: ltr;
  fill: #21324e;
  font-size: 17px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-width: 5px;
  text-anchor: middle;
  unicode-bidi: isolate;
}
.dyn-question-vector-label.is-focus { fill: #c84152; font-size: 20px; }
.dyn-question-vector-guide {
  fill: none;
  stroke: rgba(33, 50, 78, .58);
  stroke-dasharray: 8 7;
  stroke-linecap: round;
  stroke-width: 3;
}
.dyn-question-vector-angle {
  fill: none;
  stroke: #df5b68;
  stroke-linecap: round;
  stroke-width: 4;
}
.dyn-question-vector-angle-label { fill: #a52f41; font-size: 18px; }
.dyn-question-vector-note {
  direction: rtl;
  font-size: 15px;
  unicode-bidi: isolate;
}
.dyn-question-vector-divider {
  stroke: rgba(51, 75, 145, .22);
  stroke-width: 2;
}
.dyn-question-overlay-focus {
  color: #21324e;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dyn-question-situation-card rect {
  fill: rgba(255, 255, 255, .93);
  stroke: rgba(51, 75, 145, .32);
  stroke-width: 2;
}
.dyn-question-situation-schematic {
  fill: none;
  stroke: #334b91;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}
.dyn-question-situation-body {
  fill: #f3b45c;
  stroke: #7b4b18;
  stroke-width: 3;
}
.dyn-question-situation-body.is-second,
.dyn-question-situation-body.is-hanging { fill: #7bc5c5; stroke: #17656c; }
.dyn-question-situation-surface,
.dyn-question-situation-wall,
.dyn-question-situation-ceiling,
.dyn-question-situation-scale {
  fill: rgba(51, 75, 145, .05);
  stroke: #334b91;
  stroke-width: 5;
}
.dyn-question-situation-rope { fill: none; stroke: #b07a22; stroke-width: 4; }
.dyn-question-situation-pulley,
.dyn-question-situation-sensor {
  fill: #f5f7fb;
  stroke: #334b91;
  stroke-width: 4;
}
.dyn-question-situation-elevator {
  fill: rgba(51, 75, 145, .04);
  stroke: #334b91;
  stroke-width: 4;
}
.dyn-question-situation-tick { stroke: #334b91; stroke-width: 2; }
.dyn-question-situation-point,
.dyn-question-situation-agent { fill: #df5b68; stroke: #fff; stroke-width: 2; }
.dyn-question-situation-focus {
  color: #21324e;
  display: -webkit-box;
  font-family: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.42;
  overflow: hidden;
  text-align: right;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.dyn-question-situation-givens {
  display: flex;
  flex-wrap: wrap;
  font-family: inherit;
  gap: 4px;
  justify-content: flex-start;
}
.dyn-question-situation-givens span {
  background: #edf6f4;
  border: 1px solid #b8d6cf;
  border-radius: 999px;
  color: #245d60;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dyn-question-raster[data-mirror="true"] .dyn-question-raster-image { transform: scaleX(-1); }
.dyn-question-raster-image[hidden] { display: none; }

.dyn-question-raster-error {
  align-items: center;
  color: #87323c;
  display: flex;
  inset: 0;
  justify-content: center;
  margin: 0;
  padding: 1.25rem;
  position: absolute;
  text-align: center;
}
.dyn-question-raster-error[hidden] { display: none; }

.dyn-question-evidence-graph-stage:focus-visible {
  outline: 3px solid var(--dyn-indigo);
  outline-offset: -3px;
}

.dyn-question-evidence-graph-stage > .dyn-svg-stage {
  height: 100%;
  width: 100%;
}

.dyn-question-raster figcaption,
.dyn-question-evidence-graph figcaption {
  align-items: baseline;
  background: #fff;
  border-block-start: 1px solid #d8e0ed;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  line-height: 1.5;
  padding: .72rem 1rem;
}
.dyn-question-raster figcaption strong,
.dyn-question-evidence-graph figcaption strong { color: #345866; }
.dyn-question-raster figcaption span,
.dyn-question-evidence-graph figcaption span { color: #59677b; }
.dyn-question-mini-graph > rect { fill: rgba(255,255,255,.92); stroke: #b9c9d5; stroke-width: 2; }
.dyn-question-graph-axes { fill: none; stroke: #3e5066; stroke-width: 2.5; }
.dyn-question-graph-line { fill: none; stroke: var(--dyn-series-color, #334b91); stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.dyn-question-graph-point { fill: var(--dyn-series-color, #df5b68); stroke: #fff; stroke-width: 2; }
.dyn-question-graph-label { fill: #334b91; }
.dyn-question-graph-reference > line { stroke: var(--dyn-series-color, #6d7b88); stroke-dasharray: 7 6; stroke-width: 2; }
.dyn-question-graph-reference-label,
.dyn-question-graph-marker-label { fill: var(--dyn-series-color, #46586a); font-size: 12px; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.dyn-question-graph-marker > circle { fill: var(--dyn-series-color, #df5b68); stroke: #fff; stroke-width: 2.5; }
.dyn-question-graph-legend-swatch { stroke: var(--dyn-series-color, #334b91); stroke-linecap: round; stroke-width: 4; }
.dyn-question-graph-legend-label { fill: #34485c; font-size: 12px; }

.dyn-concept-check { border-inline-start: .42rem solid var(--dyn-coral); padding: 1rem 1.1rem; }
.dyn-concept-check > header { background: none; color: var(--dyn-ink); padding: 0; }
.dyn-concept-check > header span { color: #b64251; }
.dyn-concept-check > p { font-size: 1.04rem; line-height: 1.7; }
.dyn-check-options { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dyn-check-options button { background: #fff; border: 1px solid #cfd9ea; border-radius: .78rem; color: var(--dyn-ink); cursor: pointer; padding: .72rem .85rem; text-align: start; }
.dyn-check-options button:hover:not(:disabled),
.dyn-check-options button:focus-visible { border-color: var(--dyn-indigo); box-shadow: 0 0 0 3px rgba(66,107,123,.16); }
.dyn-check-options button.is-correct { background: #e3f6ef; border-color: #25836b; }
.dyn-check-options button.is-wrong { background: #fff0f1; border-color: #c95664; }
.dyn-check-options-multiple { margin-block-end: .8rem; }
.dyn-check-option-row { background: #fff; border: 1px solid #cfd9ea; border-radius: .78rem; padding: .72rem .85rem; }
.dyn-check-option-row label { align-items: flex-start; cursor: pointer; display: flex; font-weight: 750; gap: .65rem; line-height: 1.55; }
.dyn-check-option-row input { block-size: 1.2rem; flex: 0 0 auto; inline-size: 1.2rem; margin-block-start: .15rem; }
.dyn-check-option-row > p { color: #87323c; line-height: 1.5; margin: .45rem 1.85rem 0 0; }
.dyn-check-option-row > p:empty { display: none; }
.dyn-check-option-row.is-correct { background: #f4fbf8; border-color: #9bcbbb; }
.dyn-check-option-row.is-wrong { background: #fff0f1; border-color: #d57b86; }
.dyn-check-feedback { background: #eef3f2; border-radius: .7rem; line-height: 1.55; margin: .75rem 0; padding: .7rem .8rem; }

.dynamics-final-player .button-primary,
.dynamics-final-player .dyn-actions .button-primary {
  background: #426b7b;
  border-color: #426b7b;
  color: #fff;
}

.dynamics-final-player .button-primary:hover:not(:disabled),
.dynamics-final-player .dyn-actions .button-primary:hover:not(:disabled) {
  background: #345866;
  border-color: #345866;
}

.dynamics-final-player .text-button { color: #345f6d; }
.dyn-check-feedback.correct { background: #e3f6ef; color: #155c4a; }
.dyn-check-feedback.wrong { background: #fff0f1; color: #87323c; }

.dyn-vector-classification {
  background: #fff;
  border: 1px solid #d7e0df;
  border-inline-start: .42rem solid var(--dyn-teal);
  border-radius: 1rem;
  box-shadow: var(--dyn-shadow);
  margin: 1rem 0;
  padding: 1rem 1.1rem;
}
.dyn-vector-classification > header h3 { color: var(--dyn-ink); margin: 0 0 .35rem; }
.dyn-vector-classification > header p { color: #526077; margin: 0; }
.dyn-vector-classification-items {
  display: grid;
  gap: .65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem 0;
}
.dyn-vector-classification-item {
  background: #f8fafc;
  border: 1px solid #d6deea;
  border-radius: .8rem;
  padding: .7rem .8rem;
}
.dyn-vector-classification-item label {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 800;
  gap: .65rem;
}
.dyn-vector-classification-item input { block-size: 1.2rem; inline-size: 1.2rem; }
.dyn-vector-classification-item > p { color: #87323c; line-height: 1.5; margin: .45rem 1.85rem 0 0; }
.dyn-vector-classification-item > p:empty { display: none; }
.dyn-vector-classification-item.is-wrong { background: #fff0f1; border-color: #d57b86; }
.dyn-vector-classification-item.is-correct { border-color: #9bcbbb; }
.dyn-vector-classification-feedback { border-radius: .7rem; line-height: 1.55; margin: .8rem 0 0; padding: .65rem .8rem; }
.dyn-vector-classification-feedback:empty { display: none; }
.dyn-vector-classification-feedback.correct { background: #e3f6ef; color: #155c4a; }
.dyn-vector-classification-feedback.wrong { background: #fff0f1; color: #87323c; }

@media (max-width: 780px) {
  .dyn-stage,
  .dyn-diagram-stage,
  .dyn-hybrid-stage,
  .dyn-question-raster-stage,
  .dyn-question-evidence-graph-stage {
    aspect-ratio: 16 / 9;
    max-width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    width: 100%;
  }
  .dyn-lab > header { display: block; }
  .dyn-lab > header p { margin-block-start: .5rem; }
  .dyn-controls,
  .dyn-check-options,
  .dyn-vector-classification-items,
  .dyn-readout { grid-template-columns: 1fr; }
  .dyn-stage .dyn-svg-stage,
  .dyn-diagram-stage .dyn-svg-stage,
  .dyn-question-evidence-graph-stage .dyn-svg-stage {
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: none;
    min-width: 0;
    width: 100%;
  }
  .dyn-svg-stage text { font-size: 23px; }
  .dyn-physics-layer text { font-size: 24px; }
  .dyn-sim-incline-lab .dyn-incline-vector-field .dyn-vector line {
    stroke-width: 2.25;
  }
  .dyn-sim-incline-lab .dyn-incline-vector-field .dyn-vector text {
    font-size: 22px;
    stroke-width: 2.6px;
  }
  .dyn-svg-stage text.dyn-chart-label { font-size: 22px; }
  .dyn-svg-stage text.dyn-chart-tick-label { font-size: 20px; }
  .dyn-visual-sequence > header { grid-template-columns: 1fr; }
  .dyn-visual-sequence > header p { font-size: .92rem; }
  .dyn-visual-sequence > nav button span { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dyn-sequence-stage { min-height: 0; }
  .dyn-source-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dyn-source-table-wrap { min-height: 15rem; padding: .65rem; }
  .dyn-source-table { min-width: 0; width: 100%; }
  .dyn-source-table th,
  .dyn-source-table td { padding: .55rem .35rem; }
  .dyn-data-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 15rem; }
  .dyn-equation-board { min-height: 14rem; }
  .dyn-annotated-overlay .dyn-vector text,
  .dyn-annotated-overlay text.dyn-physics-symbol { font-size: 18px; stroke-width: 5.5px; }
  .dyn-solution-board { min-height: 14rem; padding: .7rem; }
  .dyn-solution-steps > li { gap: .55rem; padding: .68rem; }
  .dyn-solution-equation { font-size: 1rem; text-align: start; }
  .dyn-hybrid-diagram figcaption { align-items: stretch; flex-direction: column; }
  .dyn-hybrid-diagram figcaption button { align-self: start; }
  .dyn-vector-sequence-panel { padding-inline: .75rem; }
  .dyn-vector-stage-summary { align-items: start; flex-direction: column; }
  .dyn-vector-sequence-controls button { flex: 1 1 9rem; }
  .dyn-hybrid-overlay text { font-size: 26px; stroke-width: 5px; }
  .dyn-hybrid-overlay .dyn-vector line { stroke-width: 4.5; }
  .dyn-hybrid-overlay .dyn-ratio-name { font-size: 30px; }
  .dyn-hybrid-overlay .dyn-ratio-term { font-size: 28px; }
  .dyn-hybrid-overlay .dyn-ratio-meaning { font-size: 22px; }
  .dyn-hybrid-overlay .dyn-reference-note { font-size: 22px; }
  .dyn-hybrid-overlay .dyn-legend-symbol { font-size: 26px; }
  .dyn-hybrid-overlay .dyn-reconstruction-formula { font-size: 25px; }
  .dyn-hybrid-overlay .dyn-vector-sign-note { font-size: 26px; }
  .dyn-question-raster figcaption,
  .dyn-question-evidence-graph figcaption { display: grid; }
  .dyn-question-evidence-graph .dyn-svg-stage text { font-size: 23px; stroke-width: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .dyn-lab *,
  .dyn-diagram *,
  .dyn-hybrid-diagram *,
  .dyn-question-raster *,
  .dyn-question-evidence-graph *,
  .dyn-concept-check * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}