:root {
  --k5-ink: #102235;
  --k5-muted: #52677b;
  --k5-navy: #08243c;
  --k5-teal: #087f87;
  --k5-cyan: #26bdc6;
  --k5-amber: #f0a329;
  --k5-paper: #f4f8f7;
}

.kinematics5-player {
  --k5-card-shadow: 0 1rem 2.5rem rgba(8, 36, 60, .1);
  background: radial-gradient(circle at 95% 5%, rgba(38,189,198,.12), transparent 23rem), radial-gradient(circle at 5% 45%, rgba(240,163,41,.1), transparent 22rem), #f7fbfa;
}
.kinematics5-player .lesson-player-header { background: linear-gradient(120deg, #08243c, #0b5964); color: #fff; }
.kinematics5-player .lesson-player-header p, .kinematics5-player .lesson-player-header .overline, .kinematics5-player .lesson-saved-state span { color: #cdeeed; }
.kinematics5-player .lesson-player-header > .text-button { color: #fff; }
.kinematics5-player .lesson-saved-state { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.kinematics5-player .lesson-player-progress i { background: linear-gradient(90deg, var(--k5-amber), var(--k5-cyan)); }
.kinematics5-player .lesson-section-stage > h2 { color: var(--k5-navy); font-size: clamp(1.45rem, 3vw, 2.1rem); }

.kinematics5-player .lesson-block-heading { color: var(--k5-teal); }
.kinematics5-player .lesson-block-paragraph { background: #fff; border: 1px solid #d8e7e5; border-radius: 1rem; box-shadow: var(--k5-card-shadow); font-size: 1.04rem; line-height: 1.85; padding: 1rem 1.15rem; }
.kinematics5-player .lesson-definition { background: linear-gradient(135deg, #eaf8f6, #fff); border-color: #9fd4cf; box-shadow: var(--k5-card-shadow); }
.kinematics5-player .worked-example { background: linear-gradient(135deg, #fff8e7, #fff); border-color: #f0cc82; box-shadow: var(--k5-card-shadow); }
.kinematics5-player .display-formula-block { background: linear-gradient(135deg, #edf3ff, #fff); border-color: #b9ccf0; box-shadow: var(--k5-card-shadow); }
.kinematics5-player .lesson-callout { background: #eef9ff; border-inline-start-color: #389fc6; }
.kinematics5-player .lesson-common-mistake { background: #fff1f1; border-color: #f0b1b1; }
.kinematics5-player .lesson-summary { background: linear-gradient(135deg, #08243c, #0b5964); color: #fff; box-shadow: var(--k5-card-shadow); }
.kinematics5-player .lesson-summary p, .kinematics5-player .lesson-summary li { color: #e7f7f5; }

.kinematics5-player .lesson-question[data-lesson-question^="kinematics5."] { background: #fff; border: 1px solid #d3e2e0; border-top: 5px solid var(--k5-teal); border-radius: 1.1rem; box-shadow: var(--k5-card-shadow); margin-block: 1rem; padding: clamp(1rem, 2.5vw, 1.35rem); position: relative; }
.kinematics5-player .lesson-question[data-block-position="3"], .kinematics5-player .lesson-question[data-block-position="4"] { border-top-color: #2464cc; }
.kinematics5-player .lesson-question[data-block-position="5"], .kinematics5-player .lesson-question[data-block-position="6"] { border-top-color: #b268d1; }
.kinematics5-player .lesson-question[data-block-position="7"], .kinematics5-player .lesson-question[data-block-position="8"] { border-top-color: #dd7f34; }
.kinematics5-player .lesson-question[data-block-position="9"], .kinematics5-player .lesson-question[data-block-position="10"] { border-top-color: #d54d63; }
.kinematics5-player .lesson-question[data-block-position="11"], .kinematics5-player .lesson-question[data-block-position="12"] { border-top-color: #2f9e5c; }
.kinematics5-player .lesson-question[data-block-position="13"], .kinematics5-player .lesson-question[data-block-position="14"], .kinematics5-player .lesson-question[data-block-position="15"] { border-top-color: #7a4fd6; }
.kinematics5-player .lesson-question-purpose { background: #eaf8f6; border-radius: 999px; color: var(--k5-teal); display: inline-flex; font-weight: 800; padding: .3rem .65rem; }
.k5-question-illustration-mount {
  --k5-ill-primary: #087f87;
  background: #eef5f5;
  border: 1px solid #b8cfd3;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 .55rem 1.35rem rgb(16 45 57 / .1);
  inline-size: 100%;
  margin-block: .8rem 1rem;
  overflow: hidden;
}
.k5-illustration-loading { display: none; }
.k5-question-illustration { direction: ltr; isolation: isolate; margin: 0; }
.k5-question-illustration svg { aspect-ratio: 16 / 9; display: block; inline-size: 100%; max-block-size: 405px; }
.k5-question-illustration.k5-integrated-scene svg { max-block-size: 405px; }
.k5-question-illustration.k5-plain-raster-scene img { aspect-ratio: 16 / 9; display: block; inline-size: 100%; object-fit: cover; }
.k5-integrated-scene-image { pointer-events: none; }
.k5-integrated-scene-bed { fill: #eaf3f5; }
.k5-integrated-annotations { filter: drop-shadow(0 1px 1px rgb(255 255 255 / .9)); }
.k5-integrated-annotations text {
  paint-order: stroke;
  stroke: rgb(255 255 255 / .94);
  stroke-linejoin: round;
  stroke-width: 4px;
}
.k5-question-illustration text {
  direction: ltr;
  fill: #173b50;
  font-family: Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0;
  unicode-bidi: isolate;
}
.k5-question-illustration marker path { fill: #d84f68; }
.k5-question-illustration .k5-ill-sky { fill: #e3f6ff; }
.k5-question-illustration .k5-ill-cloud { fill: #fff; opacity: .92; }
.k5-question-illustration .k5-ill-cloud-far { fill: #fff; opacity: .65; }
.k5-question-illustration .k5-ill-sun { fill: #ffd35a; stroke: #e2a41e; stroke-width: 3; }
.k5-question-illustration .k5-ill-lab { fill: #f7fafc; }
.k5-question-illustration .k5-ill-grid { fill: none; stroke: #d5e1e7; stroke-width: 1; }
.k5-question-illustration .k5-ill-space { fill: #26324b; }
.k5-question-illustration .k5-ill-star { fill: #fff4b0; }
.k5-question-illustration .k5-ill-planet { fill: #7bb97a; stroke: #b9df85; stroke-width: 3; }
.k5-question-illustration .k5-ill-ground { fill: var(--k5-ill-ground, #9bd38c); }
.k5-question-illustration .k5-ill-hill { fill: var(--k5-ill-ground, #94cf8b); filter: brightness(.97); }
.k5-question-illustration .k5-ill-road { fill: #65727f; stroke: #4f5e69; stroke-width: 2; }
.k5-question-illustration .k5-ill-road-line { fill: none; stroke: #fff2a6; stroke-dasharray: 30 22; stroke-width: 5; }
.k5-question-illustration .k5-ill-buildings rect { fill: #5e79a2; stroke: #344f77; stroke-width: 2; }
.k5-question-illustration .k5-ill-buildings path { fill: none; stroke: #bfe7ff; stroke-width: 5; }
.k5-question-illustration .k5-ill-tower { fill: #677fa3; stroke: #334d73; stroke-width: 3; }
.k5-question-illustration .k5-ill-window { fill: #bfeaff; stroke: #334d73; stroke-width: 2; }
.k5-question-illustration .k5-ill-cliff { fill: #a7745b; stroke: #76503e; stroke-width: 3; }
.k5-question-illustration .k5-ill-ramp { fill: #c98d69; }
.k5-question-illustration .k5-ill-ramp-edge { fill: none; stroke: #684c43; stroke-width: 5; }
.k5-question-illustration .k5-ill-court { fill: #df8668; }
.k5-question-illustration .k5-ill-court-line { fill: none; stroke: #fff8da; stroke-width: 3; }
.k5-question-illustration .k5-ill-track { fill: #d76158; stroke: #a74443; stroke-width: 3; }
.k5-question-illustration .k5-ill-track-line { fill: none; stroke: #fff6cf; stroke-width: 3; }
.k5-question-illustration .k5-ill-tree path { fill: none; stroke: #795b45; stroke-width: 10; }
.k5-question-illustration .k5-ill-tree circle { fill: #3f9d68; stroke: #28784d; stroke-width: 3; }
.k5-question-illustration .k5-ill-path { fill: #d7b486; stroke: #bd9465; stroke-width: 2; }
.k5-question-illustration .entity-main { fill: none; stroke: var(--entity-color); stroke-linecap: round; stroke-linejoin: round; stroke-width: 7; }
.k5-question-illustration .entity-main.fill { fill: var(--entity-color); stroke: #153f52; stroke-width: 3; }
.k5-question-illustration .entity-detail { fill: none; stroke: #173b50; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.k5-question-illustration .entity-detail.fill-detail { fill: #173b50; }
.k5-question-illustration .entity-skin { fill: #f5b58d; stroke: #714d42; stroke-width: 2; }
.k5-question-illustration .entity-wheel { fill: #263546; stroke: #fff; stroke-width: 3; }
.k5-question-illustration .entity-window { fill: #d9f5ff; stroke: #155064; stroke-width: 2; }
.k5-question-illustration .k5-ill-axis { fill: none; stroke: #24485a; stroke-linecap: round; stroke-width: 3; }
.k5-question-illustration .k5-ill-delta-line { fill: none; stroke: #24485a; stroke-linecap: round; stroke-width: 2.5; }
.k5-question-illustration .k5-ill-symbol { direction: ltr; unicode-bidi: isolate; font-size: 18px; }
.k5-question-illustration .k5-ill-arrow { fill: none; stroke: #d84f68; stroke-linecap: round; stroke-width: 6; }
.k5-question-illustration .k5-ill-arrow.secondary { stroke: #2866c7; }
.k5-question-illustration .k5-ill-arrow.braking { stroke: #d84f68; stroke-dasharray: 9 7; }
.k5-question-illustration .k5-ill-arrow.steady { stroke: #2866c7; }
.k5-question-illustration .k5-ill-arrow.return { stroke: #2866c7; }
.k5-question-illustration .k5-ill-vector-halo {
  fill: none;
  stroke: rgb(255 255 255 / .94);
  stroke-linecap: round;
  stroke-width: 10;
}
.k5-question-illustration .k5-ill-object-vector { stroke-width: 5; }
.k5-question-illustration .k5-ill-anchored-vector.primary .k5-ill-object-vector { stroke: #d84f68; }
.k5-question-illustration .k5-ill-anchored-vector.secondary .k5-ill-object-vector { stroke: #2866c7; }
.k5-question-illustration .k5-ill-vector-label { font-size: 17px; }
.k5-question-illustration .k5-ill-attached-vector-label { font-size: 16px; }
.k5-question-illustration .k5-ill-anchor-leader {
  fill: none;
  stroke: #173b50;
  stroke-linecap: round;
  stroke-width: 2.5;
}
.k5-question-illustration .k5-ill-object-anchor { fill: #fff; stroke: #173b50; stroke-width: 3; }
.k5-question-illustration .k5-ill-anchored-callout rect {
  fill: rgb(255 255 255 / .94);
  stroke: #5f7885;
  stroke-width: 2;
}
.k5-question-illustration .k5-ill-anchored-callout text { font-size: 15px; }
.k5-question-illustration .k5-ill-route { fill: none; stroke: #8f5ac2; stroke-dasharray: 8 7; stroke-linecap: round; stroke-width: 4; }
.k5-question-illustration .k5-ill-route.vertical { stroke: #8f5ac2; }
.k5-question-illustration .k5-ill-marker circle { fill: #fff; stroke: #24485a; stroke-width: 3; }
.k5-question-illustration .k5-ill-marker text { font-size: 15px; }
.k5-question-illustration .k5-ill-badges rect { fill: #fff; stroke: #7e96a2; stroke-width: 2; }
.k5-question-illustration .k5-ill-badges text { font-size: 14px; }
.k5-question-illustration .k5-ill-focus circle { fill: #fff; stroke: #7a4fd6; stroke-width: 3; }
.k5-question-illustration .k5-ill-focus text { fill: #6440b3; font-family: Georgia, serif; font-size: 17px; }
.k5-question-illustration .k5-ill-divider,
.k5-question-illustration .k5-ill-stage-line { fill: none; stroke: #9eb2bc; stroke-dasharray: 6 6; stroke-width: 2; }
.k5-question-illustration .k5-ill-panel { fill: #7a4fd6; font-size: 18px; }
.k5-question-illustration .k5-ill-tape { fill: none; stroke: #657b87; stroke-width: 4; }
.k5-question-illustration .k5-ill-measurement-strip { fill: none; stroke: #fff; stroke-linecap: round; stroke-width: 14; }
.k5-question-illustration .k5-ill-sample { fill: #d84f68; stroke: #fff; stroke-width: 2; }
.k5-question-illustration .k5-ill-sample.secondary { fill: #2866c7; }
.k5-question-illustration .k5-ill-perspective-axis {
  fill: none;
  stroke-linecap: round;
  stroke-width: 4;
}
.k5-question-illustration .k5-ill-perspective-axis.primary { stroke: #d84f68; }
.k5-question-illustration .k5-ill-perspective-axis.secondary { stroke: #2866c7; }
.k5-question-illustration .k5-ill-perspective-axis.primary-halo,
.k5-question-illustration .k5-ill-perspective-axis.secondary-halo {
  stroke: rgb(255 255 255 / .92);
  stroke-width: 9;
}
.k5-question-illustration .k5-ill-perspective-station circle {
  fill: #fff;
  stroke-width: 4;
}
.k5-question-illustration .k5-ill-perspective-station.primary circle { stroke: #d84f68; }
.k5-question-illustration .k5-ill-perspective-station.secondary circle { stroke: #2866c7; }
.k5-question-illustration .k5-ill-perspective-station text,
.k5-question-illustration .k5-ill-perspective-body,
.k5-question-illustration .k5-ill-perspective-direction {
  fill: #173b50;
  font-size: 15px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / .96);
  stroke-linejoin: round;
  stroke-width: 5px;
}
.k5-question-illustration .k5-ill-perspective-body,
.k5-question-illustration .k5-ill-perspective-direction { font-size: 17px; }
.k5-question-illustration .k5-ill-perspective-body.primary { fill: #b72f4c; }
.k5-question-illustration .k5-ill-perspective-body.secondary { fill: #1f58ad; }
.k5-question-illustration .k5-ill-scene-axis-halo {
  fill: none;
  stroke: rgb(255 255 255 / .9);
  stroke-linecap: round;
  stroke-width: 8;
}
.k5-question-illustration .k5-ill-scene-axis-line { stroke-width: 3.5; }
.k5-question-illustration .k5-ill-scene-axis-label {
  fill: #173b50;
  font-size: 16px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / .96);
  stroke-linejoin: round;
  stroke-width: 5px;
}
.k5-question-illustration .k5-ill-bagrut-state { pointer-events: none; }
.k5-question-illustration .k5-ill-state-route {
  filter: drop-shadow(0 1px 1px rgb(255 255 255 / .95));
  opacity: .9;
  stroke: #6d3da3;
  stroke-width: 3.5;
}
.k5-question-illustration .k5-ill-state-body circle {
  fill: rgb(255 255 255 / .9);
  stroke: #c53f5b;
  stroke-width: 3.5;
  filter: drop-shadow(0 2px 2px rgb(9 34 45 / .35));
}
.k5-question-illustration .k5-ill-state-body.secondary circle { stroke: #2866c7; }
.k5-question-illustration .k5-ill-state-body.focus circle {
  filter: drop-shadow(0 0 5px rgb(255 220 93 / .95));
  stroke-width: 5;
}
.k5-question-illustration .k5-ill-state-body.kind-origin circle,
.k5-question-illustration .k5-ill-state-body.kind-endpoint circle,
.k5-question-illustration .k5-ill-state-body.kind-phase circle {
  fill: rgb(255 255 255 / .82);
  stroke: #27495a;
  stroke-width: 2.5;
}
.k5-question-illustration .k5-ill-state-body text {
  fill: #112f3d;
  font-size: 14px;
  font-weight: 800;
}
.k5-question-illustration .k5-ill-state-sample circle {
  fill: #d84f68;
  stroke: #fff;
  stroke-width: 2;
}
.k5-question-illustration .k5-ill-state-sample.secondary circle { fill: #2866c7; }
.k5-question-illustration .k5-ill-state-sample.focus circle {
  fill: #f0a329;
  stroke: #173b50;
  stroke-width: 2.5;
}
.k5-question-illustration .k5-ill-state-sample text {
  fill: #173b50;
  font-size: 13px;
  font-weight: 800;
}
.k5-question-illustration .k5-ill-state-segment path {
  fill: none;
  stroke: #087f87;
  stroke-linecap: round;
  stroke-width: 3;
}
.k5-question-illustration .k5-ill-state-segment.secondary path { stroke: #d84f68; }
.k5-question-illustration .k5-ill-state-segment.kind-prediction path {
  stroke-dasharray: 6 5;
}
.k5-question-illustration .k5-ill-state-segment-label {
  fill: #0d3b49;
  font-size: 15px;
  font-weight: 750;
  paint-order: stroke;
  stroke: rgb(255 255 255 / .94);
  stroke-width: 5px;
}
.k5-question-illustration .k5-ill-state-event circle,
.k5-question-illustration .k5-ill-state-event path {
  fill: rgb(255 255 255 / .76);
  stroke: #7a4fd6;
  stroke-width: 3.5;
}
.k5-question-illustration .k5-ill-state-event.kind-stop path,
.k5-question-illustration .k5-ill-state-event.kind-impact path,
.k5-question-illustration .k5-ill-state-event.kind-phase-boundary path { stroke: #d84f68; }
.k5-question-illustration .k5-ill-state-event text {
  fill: #4d2d86;
  font-size: 15px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / .96);
  stroke-width: 5px;
}
.k5-question-illustration .k5-ill-meeting { fill: #fff; stroke: #7a4fd6; stroke-width: 4; }
.k5-question-illustration .k5-ill-trace-dot { fill: #26a6b0; stroke: #fff; stroke-width: 2; }
.k5-question-illustration .k5-ill-trace-dot.focus { fill: #f0a329; }
.k5-question-illustration .k5-ill-gps-dots circle { fill: #7a4fd6; stroke: #fff; stroke-width: 2; }
.k5-question-illustration .k5-ill-basket path { fill: #f0a329; stroke: #805916; stroke-linejoin: round; stroke-width: 3; }
.k5-question-illustration .k5-ill-basket circle { fill: #263546; stroke: #fff; stroke-width: 2; }
.k5-question-illustration .k5-ill-stop { fill: none; stroke: #d84f68; stroke-width: 6; }
.k5-question-illustration .k5-ill-contact { fill: #0d2334; opacity: .18; }
.k5-question-illustration .k5-ill-tower-shade { fill: #4f6488; }
.k5-question-illustration .k5-ill-cliff-shade { fill: #8a6249; }
.k5-question-illustration .k5-ill-ramp-shadow { fill: #6b4c3a; opacity: .5; }
.k5-question-illustration .k5-ill-planet-rim { fill: none; stroke: #bfe89a; stroke-width: 2; opacity: .6; }
.k5-question-illustration .k5-ill-sidewalk { fill: #b9c3c9; }
.k5-question-illustration .k5-ill-fence { fill: #8fa0ab; }
.k5-question-illustration .k5-ill-depth { pointer-events: none; }
.k5-question-illustration .k5-ill-horizon { fill: none; stroke: rgb(255 255 255 / .62); stroke-width: 2; }
.k5-question-illustration .k5-ill-far-lights circle { fill: #fff6bd; filter: drop-shadow(0 0 4px rgb(255 225 116 / .65)); opacity: .75; }
.k5-question-illustration .k5-ill-perspective-rays path { fill: none; stroke: rgb(255 255 255 / .2); stroke-width: 1.2; }
.k5-question-illustration .k5-ill-foreground-shade { fill: rgb(14 40 50 / .11); filter: blur(5px); }
.k5-question-illustration .k5-ill-physics-scene { transform-box: fill-box; transform-origin: center; }
.k5-question-illustration .k5-ill-entity { filter: drop-shadow(0 5px 3px rgb(9 34 45 / .3)); }
.k5-question-illustration .k5-ill-contact { filter: blur(1px); }
.k5-question-illustration .k5-ill-marker circle,
.k5-question-illustration .k5-ill-focus circle,
.k5-question-illustration .k5-ill-badges rect { filter: drop-shadow(0 2px 2px rgb(13 43 55 / .24)); }
.kinematics5-player .lesson-answer-options { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kinematics5-player .lesson-answer-options button { background: #f8fbfa; border: 1px solid #c9ddda; border-radius: .8rem; min-height: 3.3rem; text-align: start; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.kinematics5-player .lesson-answer-options button:hover:not(:disabled) { border-color: var(--k5-teal); box-shadow: 0 .5rem 1rem rgba(8,127,135,.12); transform: translateY(-2px); }
.kinematics5-player .lesson-answer-options button.selected { background: #e5f6f4; border-color: var(--k5-teal); }
.kinematics5-player .lesson-answer-options button.correct { background: #e6f8ed; border-color: #38a663; }
.kinematics5-player .lesson-answer-options button.wrong { background: #fff0f0; border-color: #d95b67; }
.kinematics5-player .lesson-answer-feedback { border-radius: .8rem; line-height: 1.65; margin-block-start: .7rem; padding: .75rem; }

.k5-lab {
  background: radial-gradient(circle at 85% 10%, rgba(38, 189, 198, 0.16), transparent 24rem), linear-gradient(145deg, #f9fbfa, #eaf3f2);
  border: 1px solid #b9d1d0;
  border-radius: 1.3rem;
  color: var(--k5-ink);
  overflow: hidden;
  padding: clamp(1rem, 2.5vw, 1.7rem);
}

.k5-lab > header { display: grid; gap: .35rem; margin-block-end: 1rem; }
.k5-lab > header span { color: var(--k5-teal); font-size: .74rem; font-weight: 850; letter-spacing: .07em; }
.k5-lab > header h3, .k5-lab > header p { margin: 0; }
.k5-lab > header p { color: var(--k5-muted); line-height: 1.65; }
.k5-lab > header .k5-lab-instructions { background: #eef8f7; border-inline-start: 3px solid var(--k5-teal); border-radius: .55rem; color: var(--k5-ink); margin-block-start: .25rem; padding: .55rem .7rem; }

.k5-controls { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k5-controls label { background: rgba(255,255,255,.88); border: 1px solid #cbdcdb; border-radius: .8rem; display: grid; font-size: .8rem; font-weight: 750; gap: .35rem; padding: .7rem; }
.k5-controls output { color: var(--k5-teal); direction: ltr; font-variant-numeric: tabular-nums; justify-self: start; }
.k5-controls input { accent-color: var(--k5-teal); inline-size: 100%; }

.k5-workspace { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(19rem, .9fr); margin-block: 1rem; }
.k5-track { background: repeating-linear-gradient(90deg, rgba(8,36,60,.045) 0 1px, transparent 1px 9.09%), #fff; border: 1px solid #c7d9d8; border-radius: 1rem; direction: ltr; min-height: 15rem; overflow: hidden; position: relative; }
.k5-track::after { background: var(--k5-navy); content: ""; height: 2px; left: 5%; position: absolute; right: 5%; top: 62%; }
.k5-track.vertical { background: repeating-linear-gradient(0deg, rgba(8,36,60,.045) 0 1px, transparent 1px 9.09%), #fff; }
.k5-track.vertical::after { bottom: 5%; height: auto; left: 50%; right: auto; top: 5%; width: 2px; }
.k5-scale { bottom: 1rem; color: var(--k5-muted); display: flex; font-size: .68rem; font-weight: 700; justify-content: space-between; left: 5%; position: absolute; right: 5%; }
.k5-track.vertical .k5-scale { display: none; }
.k5-origin { background: var(--k5-navy); height: 1rem; left: 35.3%; position: absolute; top: calc(62% - .5rem); width: 2px; z-index: 2; }
.k5-body { background: var(--k5-amber); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 .45rem 1rem rgba(8,36,60,.28); height: 1.35rem; left: 20%; position: absolute; top: calc(62% - .68rem); transform: translateX(-50%); transition: left 80ms linear, bottom 80ms linear; width: 1.35rem; z-index: 4; }
.k5-body.second { background: var(--k5-cyan); }
.k5-track.vertical .k5-body { bottom: 10%; left: calc(50% - .68rem); top: auto; transform: none; }
.k5-traces i { background: rgba(240,163,41,.35); border-radius: 50%; height: .48rem; left: var(--trace); position: absolute; top: calc(62% - .24rem); transform: translateX(-50%); width: .48rem; z-index: 3; }

.k5-graph { background: #fff; border: 1px solid #c7d9d8; border-radius: 1rem; margin: 0; padding: .55rem; }
.k5-graph svg { direction: ltr; inline-size: 100%; }
.k5-graph .grid { stroke: #e3eceb; stroke-width: 1; }
.k5-graph .axis { stroke: var(--k5-navy); stroke-width: 1.6; }
.k5-graph path { fill: none; stroke: var(--k5-amber); stroke-linecap: round; stroke-width: 4; }
.k5-graph .second-path { stroke: var(--k5-cyan); }
.k5-graph circle { fill: var(--k5-amber); stroke: #fff; stroke-width: 2; }
.k5-graph text { fill: var(--k5-muted); font-size: 12px; }
.k5-graph figcaption { color: var(--k5-muted); font-size: .75rem; line-height: 1.5; text-align: center; }

.k5-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.k5-actions button { background: #fff; border: 1px solid #9ebfbd; border-radius: 999px; color: var(--k5-ink); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 750; min-height: 2.5rem; padding: .5rem .9rem; }
.k5-actions button:first-child { background: var(--k5-teal); border-color: var(--k5-teal); color: #fff; }
.k5-actions button[aria-pressed="true"] { background: var(--k5-amber); border-color: var(--k5-amber); color: var(--k5-navy); }
.k5-actions button:focus-visible, .k5-controls input:focus-visible { outline: 3px solid rgba(38,189,198,.35); outline-offset: 2px; }
.k5-actions button:disabled { cursor: not-allowed; opacity: .55; }
.k5-simulation-state { color: var(--k5-muted); font-size: .82rem; line-height: 1.55; margin: .55rem 0 0; }

.k5-readout { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 1rem .75rem; }
.k5-readout span { background: rgba(255,255,255,.9); border: 1px solid #cbdcdb; border-radius: .7rem; direction: ltr; display: grid; font-variant-numeric: tabular-nums; gap: .15rem; padding: .55rem .7rem; }
.k5-readout b { color: var(--k5-muted); direction: rtl; font-size: .68rem; }
.k5-lab > aside { background: #fff8e8; border-inline-start: 4px solid var(--k5-amber); border-radius: .65rem; color: #594116; line-height: 1.55; padding: .75rem .9rem; }
.k5-special-lab { background: radial-gradient(circle at 10% 10%, rgba(178,104,209,.13), transparent 20rem), linear-gradient(145deg, #fbfbff, #edf8f6); }
.k5-swap { align-self: stretch; background: linear-gradient(135deg, var(--k5-teal), #12656f); border: 0; border-radius: .8rem; color: #fff; cursor: pointer; font: inherit; font-weight: 800; min-height: 3.4rem; padding: .7rem 1rem; }
.k5-vector-stage { background: repeating-linear-gradient(90deg, rgba(8,36,60,.055) 0 1px, transparent 1px 5%); border: 1px solid #c7d9d8; border-radius: 1rem; direction: ltr; height: 10rem; margin-block: 1rem; overflow: hidden; position: relative; }
.k5-vector-axis { background: var(--k5-navy); height: 2px; left: 7%; position: absolute; right: 7%; top: 58%; }
.k5-vector-stage > span { background: #fff; border: 3px solid var(--k5-teal); border-radius: 999px; color: var(--k5-navy); font-size: .72rem; font-weight: 800; padding: .25rem .45rem; position: absolute; top: calc(58% - .85rem); transform: translateX(-50%); z-index: 3; }
.k5-vector-stage > span[data-vector-point="final"] { border-color: var(--k5-amber); }
.k5-vector-stage > i { background: linear-gradient(90deg, var(--k5-teal), var(--k5-amber)); height: .45rem; position: absolute; top: 30%; }
.k5-vector-stage > i::after { border-block: .6rem solid transparent; border-inline-start: .9rem solid var(--k5-amber); content: ""; position: absolute; right: -.5rem; top: -.4rem; }
.k5-vector-stage > i[data-direction="negative"] { background: linear-gradient(90deg, var(--k5-amber), var(--k5-teal)); }
.k5-vector-stage > i[data-direction="negative"]::after { border-inline-end: .9rem solid var(--k5-teal); border-inline-start: 0; left: -.5rem; right: auto; }
.k5-rate-tiles { align-items: end; background: #fff; border: 1px solid #c7d9d8; border-radius: 1rem; direction: ltr; display: flex; gap: .35rem; min-height: 12rem; overflow-x: auto; padding: 1rem; }
.k5-rate-tiles span { align-items: center; background: linear-gradient(180deg, var(--k5-cyan), var(--k5-teal)); border-radius: .55rem .55rem .2rem .2rem; color: #fff; display: flex; flex: 1 0 2.8rem; flex-direction: column; height: var(--rate-h); justify-content: space-between; min-height: 3.8rem; padding: .35rem; }
.k5-rate-tiles b { font-size: .68rem; }
.k5-rate-tiles i { direction: ltr; font-style: normal; font-weight: 850; }
.k5-trace-teaching, .k5-trace-lab, .k5-rate-comparison { background: linear-gradient(145deg, #f8fbfa, #edf4f7); }
.k5-trace-story { margin: 0 0 1rem; }
.k5-trace-story img { aspect-ratio: 16 / 9; border: 1px solid #bfd4d2; border-radius: 8px; display: block; inline-size: 100%; object-fit: cover; }
.k5-trace-story figcaption { color: var(--k5-muted); font-size: .78rem; line-height: 1.55; margin-block-start: .45rem; text-align: center; }
.k5-trace-abstraction { border-block: 1px solid #c7d9d8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 1rem; }
.k5-trace-abstraction > div { display: grid; gap: .5rem; padding: .85rem; }
.k5-trace-abstraction > div + div { border-inline-start: 1px solid #c7d9d8; }
.k5-trace-abstraction strong { color: var(--k5-navy); font-size: .85rem; }
.k5-trace-abstraction p { color: var(--k5-muted); font-size: .75rem; margin: 0; }
.k5-trace-strip { background: linear-gradient(180deg, transparent 47%, #789190 48% 52%, transparent 53%); direction: ltr; display: block; height: 3.2rem; position: relative; }
.k5-trace-strip > i { background: var(--k5-amber); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 .15rem .35rem rgba(8,36,60,.2); height: .8rem; left: var(--trace-position); position: absolute; top: calc(50% - .4rem); transform: translateX(-50%); width: .8rem; }
.k5-trace-strip > i span { color: var(--k5-muted); font-size: .6rem; font-style: normal; left: 50%; position: absolute; top: 1rem; transform: translateX(-50%); white-space: nowrap; }
.k5-trace-mode { display: grid; gap: .35rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-end: .8rem; }
.k5-trace-mode button { background: #fff; border: 1px solid #a9c2c0; border-radius: 6px; color: var(--k5-ink); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 800; min-height: 2.7rem; padding: .5rem .7rem; }
.k5-trace-mode button[aria-pressed="true"] { background: var(--k5-teal); border-color: var(--k5-teal); color: #fff; }
.k5-trace-controls { align-items: stretch; }
.k5-trace-fixed { background: rgba(255,255,255,.88); border: 1px solid #cbdcdb; border-radius: 8px; display: grid; gap: .35rem; padding: .7rem; }
.k5-trace-fixed span { color: var(--k5-muted); font-size: .8rem; font-weight: 750; }
.k5-trace-fixed strong { direction: ltr; font-size: 1rem; }
.k5-trace-stage { background: linear-gradient(180deg, #d8eef2 0 46%, #8fc58d 46% 55%, #d2a173 55% 100%); border: 1px solid #afc9c7; border-radius: 8px; direction: ltr; height: 17rem; margin-block: 1rem; overflow: hidden; position: relative; }
.k5-trace-stage::before { background: rgba(255,255,255,.38); bottom: 3.6rem; content: ""; height: 5.4rem; left: 0; position: absolute; right: 0; transform: perspective(18rem) rotateX(8deg); }
.k5-trace-distance-scale { bottom: .4rem; color: #334f52; display: flex; font-size: .66rem; font-weight: 750; justify-content: space-between; left: 5%; position: absolute; right: 5%; }
.k5-trace-drop-layer { inset: 0; position: absolute; }
.k5-trace-drop-layer > i { background: #e65046; border: 2px solid rgba(255,255,255,.8); border-radius: 50% 50% 46% 54%; bottom: 4.35rem; box-shadow: 0 .2rem .35rem rgba(76,35,24,.25); height: .8rem; left: var(--trace-position); opacity: 0; position: absolute; transform: translateX(-50%) scale(.6); transition: opacity .18s ease, transform .18s ease; width: 1.25rem; }
.k5-trace-drop-layer > i.visible { opacity: 1; transform: translateX(-50%) scale(1); }
.k5-trace-drop-layer > i span { background: rgba(255,255,255,.9); border-radius: 4px; bottom: -1.6rem; color: #334f52; font-size: .6rem; font-style: normal; left: 50%; padding: .1rem .2rem; position: absolute; transform: translateX(-50%); white-space: nowrap; }
.k5-trace-walker { bottom: 8rem; height: 5rem; left: 5%; position: absolute; transform: translateX(-50%); transition: left 80ms linear; width: 3.1rem; z-index: 4; }
.k5-trace-walker i { display: block; position: absolute; }
.k5-trace-walker .head { background: #d99a73; border-radius: 50%; box-shadow: inset -.2rem -.15rem rgba(99,52,40,.15); height: 1.15rem; left: 1.25rem; top: 0; width: 1.15rem; }
.k5-trace-walker .body { background: linear-gradient(100deg, #0e8b8d, #155d73); border-radius: 6px 6px 3px 3px; height: 2.3rem; left: .85rem; top: .95rem; transform: rotate(-5deg); width: 1.45rem; }
.k5-trace-walker .leg { background: #263d55; border-radius: 4px; height: 2.05rem; top: 2.9rem; transform-origin: top; width: .42rem; }
.k5-trace-walker .leg.first { left: 1.1rem; transform: rotate(18deg); }
.k5-trace-walker .leg.second { left: 1.85rem; transform: rotate(-21deg); }
.k5-trace-walker .arm { background: #d99a73; border-radius: 4px; height: 1.85rem; left: .55rem; top: 1.25rem; transform: rotate(17deg); width: .3rem; }
.k5-trace-walker .bucket { background: linear-gradient(100deg, #ef9c2e, #d65a46); border-radius: 2px 2px 6px 6px; box-shadow: inset -.25rem 0 rgba(93,42,26,.16); height: 1rem; left: 0; top: 2.45rem; width: 1rem; }
.k5-trace-readout { margin-block-start: .75rem; }
.k5-rate-pairs { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k5-rate-pairs fieldset { border: 1px solid #b9cfcd; border-radius: 8px; display: grid; gap: .65rem; margin: 0; min-width: 0; padding: .8rem; }
.k5-rate-pairs legend { color: var(--k5-teal); font-weight: 850; padding-inline: .35rem; }
.k5-rate-pairs label { display: grid; font-size: .78rem; font-weight: 750; gap: .3rem; }
.k5-rate-pairs output { color: var(--k5-teal); direction: ltr; }
.k5-rate-pairs input { accent-color: var(--k5-teal); inline-size: 100%; }
.k5-rate-graph { background: #fff; border: 1px solid #c7d9d8; border-radius: 8px; margin: 1rem 0; padding: .6rem; }
.k5-rate-graph svg { direction: ltr; display: block; inline-size: 100%; }
.k5-rate-graph .grid { stroke: #e2eceb; stroke-width: 1; }
.k5-rate-graph .axis { stroke: var(--k5-navy); stroke-width: 1.6; }
.k5-rate-graph path { fill: none; stroke-linecap: round; stroke-width: 4; }
.k5-rate-graph path.body-a { stroke: #d65a46; }
.k5-rate-graph path.body-b { stroke: #087f87; }
.k5-rate-graph circle.body-a { fill: #d65a46; }
.k5-rate-graph circle.body-b { fill: #087f87; }
.k5-rate-graph text { fill: var(--k5-muted); font-size: 12px; }
.k5-rate-graph .label-a { fill: #a93d31; font-weight: 850; }
.k5-rate-graph .label-b { fill: #08666d; font-weight: 850; }
.k5-rate-graph figcaption { color: var(--k5-muted); font-size: .75rem; text-align: center; }
.k5-equation-cards { display: grid; gap: .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 1rem; }
.k5-equation-cards button { background: #fff; border: 2px solid #cbdcdb; border-radius: 1rem; color: var(--k5-ink); cursor: pointer; display: grid; gap: .7rem; min-height: 8rem; padding: 1rem; }
.k5-equation-cards button b { color: var(--k5-teal); }
.k5-equation-cards button span { direction: ltr; font-family: Georgia, serif; font-size: 1.05rem; }
.k5-equation-cards button.correct, .k5-audit-steps button.correct { background: #e6f8ed; border-color: #38a663; }
.k5-equation-cards button.wrong, .k5-audit-steps button.wrong { background: #fff0f0; border-color: #d95b67; }
.k5-equation-feedback { background: #fff; border-inline-start: 4px solid var(--k5-amber); border-radius: .65rem; line-height: 1.6; min-height: 3.5rem; padding: .8rem; }
.k5-audit-steps { display: grid; gap: .55rem; list-style: none; padding: 0; }
.k5-audit-steps button { align-items: center; background: #fff; border: 2px solid #d1e1df; border-radius: .8rem; color: var(--k5-ink); cursor: pointer; display: flex; font: inherit; gap: .7rem; inline-size: 100%; padding: .7rem; text-align: start; }
.k5-audit-steps button span { align-items: center; background: var(--k5-navy); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 2rem; height: 2rem; justify-content: center; }

.k5-chord-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: .9rem; }
.k5-chord-presets button { background: #fff; border: 1.5px solid #b9d1d0; border-radius: 999px; color: var(--k5-ink); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 750; min-height: 2.4rem; padding: .5rem .9rem; }
.k5-chord-presets button[aria-pressed="true"] { background: var(--k5-teal); border-color: var(--k5-teal); color: #fff; }
.k5-chord-graph .chord { stroke: #7a4fd6; stroke-dasharray: 6 4; stroke-width: 2.5; }
.k5-question-graph .chord { stroke: #7a4fd6; stroke-dasharray: 7 5; stroke-width: 2.4; }
.k5-chord-graph .leg-h, .k5-chord-graph .leg-v, .k5-question-graph .leg-h, .k5-question-graph .leg-v { stroke: #b8a6e0; stroke-dasharray: 3 3; stroke-width: 1.4; }
.k5-graph .tangent { stroke: #18844f; stroke-linecap: round; stroke-width: 3; }
.k5-graph .approaching-secant { stroke: #7a4fd6; stroke-dasharray: 7 5; stroke-linecap: round; stroke-width: 2.6; }
.k5-graph .tangent-leg { stroke: #2a9a66; stroke-dasharray: 4 3; stroke-width: 1.5; }
.k5-graph .tangent-point { fill: #fff; stroke: #18844f; stroke-width: 2.5; }
.k5-graph .tangent-contact { fill: #18844f; stroke: #fff; stroke-width: 2.5; }
.k5-graph .secant-point { fill: #7a4fd6; stroke: #fff; stroke-width: 2.5; }
.k5-graph .tangent-label { fill: #126b40; font-size: 12px; font-weight: 850; }
.k5-graph .secant-label { fill: #5a3fa8; font-size: 12px; font-weight: 850; }
.k5-tangent-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k5-tangent-formula { background: #fff; border-inline-start: 4px solid #18844f; direction: ltr; font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; margin-block: .75rem; padding: .75rem .9rem; text-align: center; }
.k5-graph .chord-point { fill: #7a4fd6; stroke: #fff; stroke-width: 2; }
.k5-graph .chord-label { fill: #5a3fa8; font-size: 12px; font-weight: 700; }
.k5-graph .tick-label { fill: #526b70; font-size: 10px; }
.k5-graph .signed-area { stroke: none; }
.k5-graph .signed-area.positive { fill: rgba(38, 189, 198, .2); }
.k5-graph .signed-area.negative { fill: rgba(216, 92, 104, .2); }
.k5-graph .area-label { fill: #244e54; font-size: 11px; font-weight: 800; }
.k5-graph .series-point { fill: var(--k5-amber); }
.k5-graph .series-point.second { fill: var(--k5-cyan); }
.k5-graph .measurement-uncertainty { fill: rgba(240, 163, 41, .16); stroke: rgba(191, 111, 15, .42); stroke-width: 1.2; }
.k5-graph .trend-residual { stroke: #7c8f93; stroke-dasharray: 4 4; stroke-width: 1.4; }
.k5-graph .highlight-point { fill: #7a4fd6; stroke: #fff; stroke-width: 2; }
.k5-graph .graph-legend text { fill: var(--k5-ink); font-size: 11px; }
.k5-graph .graph-legend line { stroke-width: 4; }
.k5-graph .graph-legend line.data-series { stroke: var(--k5-amber); }
.kinematics-graph-example { background: linear-gradient(145deg, #fff, #f3fbfa); border: 1px solid #c8dfdc; border-radius: 1.15rem; box-shadow: var(--k5-card-shadow); padding: 1rem; }
.kinematics-graph-example > header span { color: var(--k5-teal); font-size: .73rem; font-weight: 850; letter-spacing: .04em; }
.kinematics-graph-example > header h3 { color: var(--k5-navy); margin: .2rem 0 .45rem; }
.kinematics-graph-example > header p { line-height: 1.65; margin: 0 0 .8rem; }
.kinematics-graph-example ol { display: grid; gap: .35rem; margin: .7rem 0; padding-inline-start: 1.5rem; }
.kinematics-graph-example details { background: #fff; border: 1px solid #d8e7e5; border-radius: .8rem; margin-block-start: .75rem; padding: .7rem .85rem; }
.kinematics-graph-example summary { color: var(--k5-navy); cursor: pointer; font-weight: 800; }
.kinematics-graph-example details p { line-height: 1.7; margin: .65rem 0 0; }
.k5-question-graph { margin-block: .9rem; }
.course-simulation[data-course-visualization="kinematics5.experimental-graph-lab"] {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.k5-experimental-graph-lab { background: linear-gradient(145deg, #f7fbfa, #edf4f7); }
.k5-experiment-steps { display: grid; gap: .4rem; grid-template-columns: repeat(10, minmax(0, 1fr)); margin-block: .5rem 1rem; }
.k5-experiment-steps button { aspect-ratio: 1; background: #fff; border: 1px solid #a9c2c0; border-radius: 6px; color: var(--k5-muted); cursor: pointer; font: inherit; font-size: .75rem; font-weight: 850; min-inline-size: 0; }
.k5-experiment-steps button[aria-current="step"] { background: var(--k5-teal); border-color: var(--k5-teal); color: #fff; }
.k5-experiment-frame { background: rgba(255,255,255,.72); border: 1px solid #c7d9d8; border-radius: 8px; padding: clamp(.75rem, 2vw, 1.15rem); }
.k5-experiment-frame > header { display: grid; gap: .3rem; margin-block-end: .8rem; }
.k5-experiment-frame > header span { color: var(--k5-teal); direction: ltr; font-size: .72rem; font-weight: 850; justify-self: start; }
.k5-experiment-frame h4 { color: var(--k5-navy); font-size: 1.1rem; margin: 0; }
.k5-experiment-frame p { color: var(--k5-muted); line-height: 1.65; margin: 0; }
.k5-experiment-frame [data-exp-visual] { align-items: start; display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
.k5-experiment-scene { margin: 0; }
.k5-experiment-scene svg { background: linear-gradient(180deg, #e8f4f5 0 62%, #eef1ed 62% 100%); border: 1px solid #bfd4d2; border-radius: 8px; display: block; inline-size: 100%; }
.k5-experiment-scene svg text { fill: #395960; font-size: 14px; font-weight: 750; }
.k5-experiment-scene figcaption { color: var(--k5-muted); font-size: .78rem; line-height: 1.55; margin-block-start: .45rem; text-align: center; }
.k5-experiment-table-wrap { overflow-x: auto; }
.k5-experiment-table { background: #fff; border-collapse: collapse; direction: ltr; inline-size: min(100%, 28rem); margin-inline: auto; text-align: center; }
.k5-experiment-table caption { color: var(--k5-navy); direction: rtl; font-weight: 850; margin-block-end: .45rem; }
.k5-experiment-table th, .k5-experiment-table td { border: 1px solid #b9cfcd; min-inline-size: 7rem; padding: .55rem .8rem; }
.k5-experiment-table th { background: #e8f5f3; color: var(--k5-teal); }
.k5-experimental-graph { padding: .65rem; }
.k5-experimental-graph svg { display: block; }
.k5-experiment-graph-comparison { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k5-experiment-graph-comparison figcaption { color: var(--k5-muted); font-size: .75rem; line-height: 1.5; text-align: center; }
.k5-graph .trend-candidate-1 { stroke: #d65a46; stroke-dasharray: 7 5; }
.k5-graph .trend-candidate-2 { stroke: #087f87; }
.k5-graph .trend-candidate-3 { stroke: #7a4fd6; stroke-dasharray: 3 5; }
.k5-experimental-graph .slope-teaching-run { stroke: #087f87; stroke-dasharray: none; stroke-width: 4; }
.k5-experimental-graph .slope-teaching-rise { stroke: #7a4fd6; stroke-dasharray: none; stroke-width: 4; }
.k5-experimental-graph .slope-teaching-point { fill: #fff; stroke: #172f46; stroke-width: 3; }
.k5-experimental-graph .slope-teaching-corner { fill: #172f46; stroke: #fff; stroke-width: 2; }
.k5-experimental-graph .slope-teaching-label { fill: #172f46; font-size: 17px; font-weight: 850; paint-order: stroke; stroke: #fff; stroke-width: 6px; }
.k5-experimental-graph .slope-teaching-point-label { fill: #172f46; font-size: 15px; font-weight: 850; paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.k5-experiment-frame output { background: #f2f7f6; border-inline-start: 4px solid var(--k5-amber); direction: ltr; display: block; font-family: Georgia, serif; font-size: 1rem; font-weight: 750; margin-block-start: .8rem; padding: .7rem .9rem; text-align: center; }
.k5-experiment-frame output.is-multiline { line-height: 1.9; white-space: pre-line; }
.k5-experiment-frame output[hidden] { display: none; }
.k5-experiment-nav { display: flex; justify-content: space-between; margin-block-start: .75rem; }
.k5-experiment-nav button { align-items: center; background: #fff; border: 1px solid #9ebfbd; border-radius: 6px; color: var(--k5-ink); cursor: pointer; display: inline-flex; font: inherit; font-size: 1.2rem; font-weight: 900; block-size: 2.7rem; inline-size: 2.7rem; justify-content: center; }
.k5-experiment-nav button:last-child { background: var(--k5-teal); border-color: var(--k5-teal); color: #fff; }
.k5-experiment-nav button:disabled { cursor: not-allowed; opacity: .42; }
.k5-block-result { align-items: center; background: #edf8f6; border: 1px solid #b8dcd7; border-radius: 1rem; display: inline-flex; gap: .8rem; padding: .75rem 1rem; }
.k5-block-result strong { color: var(--k5-teal); direction: ltr; font-size: 1.5rem; }
.k5-block-result span { color: var(--k5-muted); font-size: .8rem; }
.k5-teacher-block-results { background: #f4faf9; border: 1px solid #c9dfdc; border-radius: .8rem; display: grid; gap: .45rem; margin-block-start: .8rem; padding: .75rem; }
.k5-teacher-block-results > strong { color: var(--k5-teal); }
.k5-teacher-block-results > div { align-items: center; background: #fff; border-radius: .55rem; display: grid; gap: .25rem .7rem; grid-template-columns: minmax(8rem, 1fr) auto; padding: .55rem .65rem; }
.k5-teacher-block-results b { direction: ltr; }
.k5-teacher-block-results small { color: var(--k5-muted); grid-column: 1 / -1; }

@media (max-width: 850px) {
  .k5-controls, .k5-workspace { grid-template-columns: 1fr; }
  .k5-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kinematics5-player .lesson-answer-options { grid-template-columns: 1fr; }
  .k5-equation-cards { grid-template-columns: 1fr; }
  .k5-trace-abstraction, .k5-trace-mode, .k5-rate-pairs { grid-template-columns: 1fr; }
  .k5-trace-abstraction > div + div { border-inline-start: 0; border-block-start: 1px solid #c7d9d8; }
  .k5-trace-stage { height: 14rem; }
  .k5-experimental-graph-lab { padding: .55rem; }
  .k5-experiment-frame { padding: .55rem; }
  .k5-experiment-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .k5-experiment-graph-comparison { grid-template-columns: 1fr; }
  .k5-experimental-graph { padding: .3rem; }
  .k5-experimental-graph svg { max-block-size: none; }
  .k5-experiment-frame output.is-multiline { font-size: .8rem; padding-inline: .35rem; }
  .k5-trace-walker { bottom: 6.8rem; transform: translateX(-50%) scale(.86); transform-origin: bottom; }
  .k5-question-illustration svg { max-block-size: none; min-block-size: 140px; }
  .k5-question-illustration .k5-ill-badges text,
  .k5-question-illustration .k5-ill-marker text { font-size: 20px; }
  .k5-question-illustration .k5-ill-symbol { font-size: 24px; }
  .k5-question-illustration .k5-ill-focus text { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .k5-body { transition: none; }
}