.geometric-optics-course {
  --course-accent: #0b7285;
  --course-accent-soft: #dff3f5;
  --course-ink: #16343b;
}

.geometric-optics-player {
  --go-lens-symbol: #006d77;
}

.geometric-optics-course .student-course-hero {
  background: linear-gradient(135deg, #edf9fa 0%, #fff8e8 100%);
}

.geometric-optics-player .physics-course-header {
  color: #172342;
  background: #eef4f8;
}

.geometric-optics-player .physics-course-header .text-button {
  color: #172342;
}

.go-static-diagram,
.go-lab {
  margin: 1.2rem 0;
  border: 1px solid #c9e1e5;
  border-radius: 20px;
  background: #fbfefe;
  box-shadow: 0 12px 30px rgba(19, 64, 72, .08);
  overflow: hidden;
}

.go-static-diagram > div,
.go-canvas {
  padding: .75rem;
  direction: ltr;
  background: linear-gradient(#fff, #f7fbfc);
}

.go-static-diagram figcaption,
.go-readout {
  padding: .85rem 1.1rem;
  color: #254d55;
  background: #eaf6f7;
  font-weight: 650;
  line-height: 1.6;
}

.go-lesson-drawing figcaption {
  display: grid;
  gap: .2rem;
}

.go-lesson-drawing figcaption strong {
  color: #173f47;
}

.go-lesson-drawing figcaption span {
  font-weight: 500;
}

.go-static-diagram > .go-lesson-drawing-canvas {
  padding: 0;
  background: #e8e1d2;
}

.go-lesson-drawing-canvas img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.go-ray-svg .lesson-state-panel {
  fill: #f8fbfc;
  stroke: #b9d2d8;
  stroke-width: 2;
}

.go-ray-svg .lesson-state-panel.changed {
  fill: #f3faf7;
  stroke: #90bca7;
}

.go-ray-svg .lesson-role-badge rect {
  fill: rgba(255, 255, 255, .94);
  stroke: #7aaab3;
  stroke-width: 1.5;
}

.go-ray-svg .lesson-role-badge text {
  fill: #16434c;
  font-size: 15px;
  font-weight: 800;
}

.go-lab > header {
  padding: 1rem 1.2rem .4rem;
}

.go-lab > header span {
  color: #087383;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.go-lab > header h3 {
  margin: .2rem 0;
}

.go-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  padding: .8rem 1.2rem 1rem;
}

.go-controls label {
  display: grid;
  gap: .35rem;
  color: #244b53;
  font-weight: 700;
}

.go-controls output {
  direction: ltr;
  unicode-bidi: isolate;
  color: #8a4f00;
}

.go-controls input,
.go-controls select {
  width: 100%;
}

.go-lab > button {
  margin: .85rem 1.2rem 1.1rem;
}

.go-ray-svg {
  width: 100%;
  min-height: 260px;
  display: block;
}

.go-ray-svg text {
  fill: #173f47;
  font: 700 17px ui-sans-serif, system-ui, sans-serif;
}

.go-ray-svg .go-arrowhead {
  fill: #263f45;
  stroke: none;
}

.go-ray-svg .axis,
.go-ray-svg .surface,
.go-ray-svg .normal,
.go-ray-svg .mirror,
.go-ray-svg .focus-mark {
  vector-effect: non-scaling-stroke;
  stroke: #45666c;
  fill: none;
}

.go-ray-svg .axis { stroke-width: 1.6; }
.go-ray-svg .surface { stroke-width: 4; }
.go-ray-svg .normal { stroke-width: 1.5; stroke-dasharray: 7 6; }
.go-ray-svg .mirror { stroke: #477985; stroke-width: 9; }
.go-ray-svg .focus-mark { stroke-width: 2; }

.go-ray-svg .ray {
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke: #d94841;
  stroke-width: 3.2;
  marker-end: url(#go-arrow);
}

.go-ray-svg .virtual {
  vector-effect: non-scaling-stroke;
  stroke: #6d7d82;
  stroke-width: 2.2;
  stroke-dasharray: 8 7;
  fill: none;
}

.go-ray-svg .angle {
  stroke: #865b00;
  stroke-width: 2;
  fill: none;
}

.go-ray-svg .medium { fill: #dff4f7; opacity: .72; }
.go-ray-svg .medium.glass { fill: #d7eef1; opacity: .82; }
.go-ray-svg .screen { fill: #243d43; }
.go-ray-svg .screen.target { fill: #f1c75b; }
.go-ray-svg .object { fill: none; stroke: #163f48; stroke-width: 5; }
.go-ray-svg .image { fill: none; stroke: #8f3ca7; stroke-width: 5; }
.go-ray-svg .fiber-cladding { fill: #d7e4e8; stroke: #6b8790; stroke-width: 2; }
.go-ray-svg .fiber-core { fill: #eefbfc; stroke: #86cbd4; stroke-width: 2; }
.go-ray-svg .intermediate { fill: #8f3ca7; }
.go-ray-svg .light-source,
.go-ray-svg .light-pulse,
.go-ray-svg .real-point {
  fill: #ffd166;
  stroke: #9a5a00;
  stroke-width: 2.5;
}
.go-ray-svg .source-rays,
.go-ray-svg .eye-outline,
.go-ray-svg .eye-body,
.go-ray-svg .cornea,
.go-ray-svg .retina,
.go-ray-svg .facet {
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke: #355f68;
  stroke-width: 2.5;
}
.go-ray-svg .eye-pupil { fill: #173f47; }
.go-ray-svg .speed-lane { stroke: #8fb7bf; stroke-width: 2; }
.go-ray-svg .speed-lane.vacuum { fill: #f8fcfd; }
.go-ray-svg .speed-lane.material { fill: #dff4f7; }
.go-ray-svg .surface.smooth { stroke-width: 5; }
.go-ray-svg .prism {
  fill: #d7eef1;
  stroke: #168498;
  stroke-width: 3;
}
.go-ray-svg .white-ray,
.go-ray-svg .spectrum-ray {
  vector-effect: non-scaling-stroke;
  stroke-width: 4;
  marker-end: url(#go-arrow);
}
.go-ray-svg .white-ray { stroke: #8a9196; }
.go-ray-svg .spectrum-ray.red { stroke: #d62828; }
.go-ray-svg .spectrum-ray.orange { stroke: #f77f00; }
.go-ray-svg .spectrum-ray.yellow { stroke: #e2b007; }
.go-ray-svg .spectrum-ray.green { stroke: #2a9d55; }
.go-ray-svg .spectrum-ray.blue { stroke: #1976d2; }
.go-ray-svg .spectrum-ray.indigo { stroke: #4b4bb8; }
.go-ray-svg .spectrum-ray.violet { stroke: #8f3ca7; }
.go-ray-svg .apparent-point {
  fill: #fff;
  stroke: #8f3ca7;
  stroke-width: 3;
}
.go-ray-svg .lens-cover { fill: #222b2f; opacity: .96; }
.go-ray-svg .eye-body { fill: #edf8fa; stroke-width: 3; }
.go-ray-svg .iris { fill: #467e88; }
.go-ray-svg .retina { stroke: #b45b5b; stroke-width: 5; }
.go-ray-svg .retina-image { stroke: #a02683; }
.go-ray-svg .diagnostic-ray { stroke: #9a5a1a; opacity: .78; }
.go-ray-svg .diagnostic-focus { fill: #9a5a1a; }
.go-ray-svg .sensor,
.go-ray-svg .image-plane,
.go-ray-svg .aperture-stop,
.go-ray-svg .secondary-mirror {
  fill: none;
  stroke: #355f68;
  stroke-width: 4;
}
.go-ray-svg .sensor.target { stroke: #2f8a5b; stroke-width: 7; }
.go-ray-svg .image-plane { stroke: #8f3ca7; stroke-width: 2; stroke-dasharray: 6 5; }
.go-ray-svg .aperture-stop { stroke: #253d43; stroke-width: 8; }
.go-ray-svg .blur-circle { fill: rgba(224, 122, 8, .18); stroke: #e07a08; stroke-width: 2; }
.go-ray-svg .illuminated-object { fill: #fff3b8; stroke: #c79b22; stroke-width: 2; }
.go-ray-svg .eye-symbol { fill: #edf8fa; stroke: #245d68; stroke-width: 3; }
.go-ray-svg .secondary-mirror { stroke-width: 7; }
.go-ray-svg .mirror.concave { fill: none; }
.go-ray-svg .focus-mark.secondary { opacity: .7; }
.go-ray-svg .beam {
  fill: #ffe08a;
  opacity: .38;
}
.go-ray-svg .right-angle {
  fill: none;
  stroke: #45666c;
  stroke-width: 2;
}
.go-ray-svg .impact-point {
  fill: #173f47;
}
.go-ray-svg .focal-distance {
  fill: none;
  stroke: #168498;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.go-ray-svg .focal-distance {
  stroke: #865b00;
  stroke-width: 2;
}
.go-ray-svg .focus-point {
  fill: #ffd166;
  stroke: #865b00;
  stroke-width: 2.5;
}
.go-ray-svg .thin-lens-symbol .lens-axis-line,
.go-ray-svg .thin-lens-symbol .lens-arrowheads {
  fill: none;
  stroke: var(--go-lens-symbol, #006d77);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.go-ray-svg .focus-point { fill: #8f3ca7; }
.go-ray-svg .focal-distance {
  stroke: #8f3ca7;
  stroke-width: 2;
}

.go-ray-svg .given-band {
  fill: #f7fbfc;
  stroke: #9ab8be;
  stroke-width: 1.5;
}
.go-ray-svg .given-line {
  fill: #173f47;
  font-size: 13px;
  font-weight: 650;
}
.go-ray-svg .unknown-label {
  fill: #8b4b00;
  font-size: 18px;
  font-weight: 800;
}
.go-ray-svg .measurement-path,
.go-ray-svg .distance-bracket,
.go-ray-svg .field-boundary {
  fill: none;
  stroke: #45666c;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}
.go-ray-svg .measurement-path { marker-end: url(#go-arrow); }
.go-ray-svg .measurement-path.second { stroke: #168498; }
.go-ray-svg .distance-bracket { stroke: #865b00; }
.go-ray-svg .field-boundary { stroke: #1779a2; }
.go-ray-svg .receiver {
  fill: #e6eef0;
  stroke: #355f68;
  stroke-width: 3;
}
.go-ray-svg .given-image,
.go-ray-svg .intermediate-given {
  fill: none;
  stroke: #8f3ca7;
  stroke-width: 5;
}
.go-ray-svg .height-bracket,
.go-ray-svg .sensor-rail {
  fill: none;
  stroke: #45666c;
  stroke-width: 2;
}
.go-ray-svg .semicircle-block {
  fill: #dff4f7;
  stroke: #168498;
  stroke-width: 3;
}
.go-ray-svg .flat-interface,
.go-ray-svg .protractor-arc,
.go-ray-svg .protractor-tick {
  fill: none;
  stroke: #617d84;
  stroke-width: 1.5;
}
.go-ray-svg .laser-source {
  fill: #d94841;
  stroke: #7d2925;
  stroke-width: 2;
}
.go-ray-svg .wavefront {
  fill: none;
  stroke: #1779a2;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}
.go-ray-svg .wavefront.transmitted { stroke: #e07a08; }
.go-ray-svg .aquarium-water {
  fill: #dff4f7;
  stroke: none;
}
.go-ray-svg .aquarium-glass,
.go-ray-svg .water-surface {
  fill: none;
  stroke: #6d9da7;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.go-ray-svg .water-surface { stroke: #168498; stroke-width: 4; }
.go-ray-svg .aquarium-fish ellipse,
.go-ray-svg .aquarium-fish path {
  fill: #e6a23c;
  stroke: #173f47;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
.go-ray-svg .aquarium-fish circle { fill: #173f47; }

.go-ray-svg .human-figure {
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .person-head,
.go-ray-svg .person-body {
  fill: #f0bd91;
  stroke: #173f47;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .person-body { fill: none; }
.go-ray-svg .person-garment {
  fill: #e6a23c;
  stroke: #173f47;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
.go-ray-svg .image-person .person-body,
.go-ray-svg .image-person .person-head,
.go-ray-svg .image-person .person-garment { stroke: #8f3ca7; }
.go-ray-svg .image-person .person-garment { fill: #ead6ef; }
.go-ray-svg .virtual-person { opacity: .78; }

.go-ray-svg .scene-floor {
  fill: none;
  stroke: #789298;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .dark-room { fill: #26343a; stroke: #172a30; stroke-width: 2; }
.go-ray-svg .dark-room ~ .student circle {
  fill: #75878c;
  stroke: #a8b9bd;
  stroke-width: 2;
}
.go-ray-svg .dark-room ~ .student path {
  fill: none;
  stroke: #a8b9bd;
  stroke-width: 4;
}
.go-ray-svg .dark-room ~ .dark-ball {
  stroke: #71858a;
  stroke-width: 2;
}

.go-ray-svg .unit-three-room {
  fill: #f4fafb;
  stroke: #789aa2;
  stroke-width: 2;
}

.go-ray-svg .ceiling-light-patch {
  fill: #fff0b3;
  stroke: #d39a22;
  stroke-width: 2;
}

.go-ray-svg .upward-lamp {
  stroke-width: 3;
}

.go-ray-svg .unit-three-upward-room .lamp-stand,
.go-ray-svg .unit-three-upward-room .table-top {
  fill: none;
  stroke: #355f68;
  stroke-width: 4;
}

.go-ray-svg .unit-three-wax-screen .thin-lens {
  fill: rgba(181, 225, 234, .62);
  stroke: #168498;
  stroke-width: 3;
}

.go-ray-svg .unit-three-wax-screen .wax-screen {
  fill: rgba(238, 249, 251, .78);
  stroke: #537b84;
  stroke-width: 3;
}

.go-ray-svg .unit-three-wax-screen .projected-image {
  fill: none;
  stroke: #8f3ca7;
  stroke-width: 4;
}

.go-ray-svg .bright-room-panel {
  fill: #fff8df;
  stroke: #d0a34a;
  stroke-width: 2;
}

.go-ray-svg .half-silvered-panel {
  fill: rgba(190, 226, 233, .76);
  stroke: #4e7b84;
  stroke-width: 2;
}

.go-ray-svg .unit-three-one-way .unit-three-student circle {
  fill: #f0bd91;
  stroke: #355f68;
  stroke-width: 2;
}

.go-ray-svg .unit-three-one-way .unit-three-student path {
  fill: none;
  stroke: #355f68;
  stroke-width: 4;
}

.go-ray-svg .unit-three-one-way .unit-three-teacher circle {
  fill: #71858a;
  stroke: #b9c8cb;
  stroke-width: 2;
}

.go-ray-svg .unit-three-one-way .unit-three-teacher path {
  fill: none;
  stroke: #b9c8cb;
  stroke-width: 4;
}

.go-ray-svg .unit-three-earthshine .earth-world {
  fill: #8bc8dd;
  stroke: #2a6674;
  stroke-width: 3;
}

.go-ray-svg .unit-three-earthshine .earth-land {
  fill: #4f9467;
  stroke: #2f714d;
  stroke-width: 2;
}

.go-ray-svg .unit-three-earthshine .moon-dark-face {
  fill: #34464c;
  stroke: none;
}

.go-ray-svg .unit-three-earthshine .moon-craters {
  fill: none;
  stroke: #9b7d37;
  stroke-width: 2;
}

.go-ray-svg .unit-four-candle,
.go-ray-svg .unit-four-candle-base {
  fill: #fff1b8;
  stroke: #8a5a00;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-candle-base { fill: none; }

.go-ray-svg .unit-four-card,
.go-ray-svg .unit-four-aperture-wall,
.go-ray-svg .unit-four-aperture-board {
  fill: #72878c;
  stroke: #354f56;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-hole {
  fill: #fff;
  stroke: #274c55;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-hole-wide { stroke-width: 3; }

.go-ray-svg .unit-four-screen {
  fill: #eef8fa;
  stroke: #456c75;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-blocker,
.go-ray-svg .unit-four-triangle {
  fill: #d9a558;
  stroke: #69481a;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-mark {
  fill: #b63535;
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-boundary-mark {
  fill: none;
  stroke: #4f6065;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-corridor {
  fill: #eef4f5;
  stroke: #445d64;
  stroke-width: 12;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-view-label,
.go-ray-svg .unit-four-end-label {
  fill: #48666d;
  font-size: 16px;
  font-weight: 700;
}

.go-ray-svg .unit-four-ground,
.go-ray-svg .unit-four-pole {
  fill: none;
  stroke: #344f56;
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-given-shadow,
.go-ray-svg .unit-four-given-wall-shadow {
  fill: none;
  stroke: #52666b;
  stroke-width: 14;
  stroke-linecap: round;
  opacity: .7;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-given-shadow.broad { stroke-width: 22; }

.go-ray-svg .unit-four-option circle,
.go-ray-svg .unit-four-position {
  fill: #f7fbfc;
  stroke: #52737b;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-option text,
.go-ray-svg .unit-four-position-label {
  fill: #24464e;
  font-size: 23px;
  font-weight: 800;
}

.go-ray-svg .unit-four-cube-front {
  fill: #e8bd73;
  stroke: #604821;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-cube-side {
  fill: #b78643;
  stroke: #604821;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-cube-top {
  fill: #f4d59d;
  stroke: #604821;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-camera {
  fill: #f7fbfc;
  stroke: #7d969c;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-labelled-point {
  fill: #eaf5f7;
  stroke: #176f7c;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-four-point-label {
  fill: #154e57;
  font-size: 17px;
  font-weight: 800;
}

.go-ray-svg .unit-four-pinhole .option-screen { opacity: .78; }
.go-ray-svg .energy-input,
.go-ray-svg .energy-output {
  fill: #eef8fa;
  stroke: #5d858d;
  stroke-width: 2;
}
.go-ray-svg .energy-device {
  fill: #ffe7a1;
  stroke: #a96e00;
  stroke-width: 3;
}
.go-ray-svg .bulb-base,
.go-ray-svg .energy-link {
  fill: none;
  stroke: #365f68;
  stroke-width: 4;
}
.go-ray-svg .energy-value {
  fill: #0d5964;
  font-size: 24px;
  font-weight: 800;
}
.go-ray-svg .lamp-off { fill: #6c797d; stroke: #43555a; stroke-width: 2; }
.go-ray-svg .sealed-box,
.go-ray-svg .opaque-barrier,
.go-ray-svg .opaque-column,
.go-ray-svg .curtain,
.go-ray-svg .blind-slats rect { fill: #6b7e83; stroke: #354f56; stroke-width: 2; }
.go-ray-svg .blocked-path { fill: none; stroke: #b54039; stroke-width: 3; }
.go-ray-svg .phone { fill: #20383e; stroke: #10262b; stroke-width: 3; }
.go-ray-svg .phone-screen { fill: #c6f1f5; stroke: #168498; stroke-width: 2; }
.go-ray-svg .cup { fill: #fff8e4; stroke: #936b25; stroke-width: 3; }
.go-ray-svg .moon { fill: #fff4bb; }
.go-ray-svg .rooftops { stroke-width: 5; }
.go-ray-svg .night-scene-panel,
.go-ray-svg .unit-one-room { fill: #26343a; stroke: #53727a; stroke-width: 2; }
.go-ray-svg .night-moon { fill: #fff4bb; stroke: #e6a23c; stroke-width: 2; }
.go-ray-svg .street-lamp,
.go-ray-svg .yard-ground,
.go-ray-svg .tree,
.go-ray-svg .closed-door { fill: none; stroke: #b7cbd0; stroke-width: 4; }
.go-ray-svg .unit-one-panel-number,
.go-ray-svg .unit-one-dark-label { fill: #eefbfc; font-size: 18px; font-weight: 800; }
.go-ray-svg .flashlight-beam { fill: rgba(255, 209, 102, .34); stroke: #e6a23c; stroke-width: 2; }
.go-ray-svg .unlit-object { fill: #18282d; stroke: #8da3a9; stroke-width: 3; }
.go-ray-svg .teacher-face circle { fill: #fff4bb; stroke: #8a651c; stroke-width: 3; }
.go-ray-svg .teacher-face path { fill: none; stroke: #4d3b1e; stroke-width: 4; }
.go-ray-svg .observer-student circle { fill: #dff4f7; stroke: #355f68; stroke-width: 3; }
.go-ray-svg .observer-student path { fill: none; stroke: #355f68; stroke-width: 5; }
.go-ray-svg .light-patch { fill: #fff4bb; stroke: #e6a23c; stroke-width: 8; }
.go-ray-svg .condition-panel { fill: #eef8fa; stroke: #789da5; stroke-width: 2; }
.go-ray-svg .closed-eye { fill: none; stroke: #355f68; stroke-width: 5; }
.go-ray-svg .shadow-region { fill: rgba(38, 52, 58, .28); stroke: #617d84; stroke-width: 2; }
.go-ray-svg .component-slot { fill: rgba(223, 244, 247, .28); stroke: #8faeb4; stroke-width: 2; }

.go-ray-svg .question-panel { fill: rgba(255, 255, 255, .56); stroke: #9bb0b4; stroke-width: 1.7; }
.go-ray-svg .state-label-text { fill: #16434c; font-size: 18px; font-weight: 800; }
.go-ray-svg .changed-parameter-band,
.go-ray-svg .measurement-card,
.go-ray-svg .result-check-card,
.go-ray-svg .sequence-step,
.go-ray-svg .change-record {
  fill: #edf8fa;
  stroke: #6f9ea7;
  stroke-width: 2;
}
.go-ray-svg .claim-bubble {
  fill: #fff6db;
  stroke: #b88724;
  stroke-width: 2;
}
.go-ray-svg .construction-target,
.go-ray-svg .empty-check {
  fill: #fff;
  stroke: #8b6a2e;
  stroke-width: 2.2;
}
.go-ray-svg .change-direction,
.go-ray-svg .measurement-bracket {
  fill: none;
  stroke: #087383;
  stroke-width: 3;
  marker-end: url(#go-arrow);
}
.go-ray-svg .measurement-bracket { marker-end: none; stroke-width: 2; }
.go-ray-svg .path-evidence-key circle,
.go-ray-svg .inspection-mark {
  fill: #fff6db;
  stroke: #9b6b14;
  stroke-width: 2;
}
.go-ray-svg .path-evidence-key text,
.go-ray-svg .question-task-line { font-size: 14px; }
.go-ray-svg .evidence-field,
.go-ray-svg .interaction-field,
.go-ray-svg .system-field {
  fill: rgba(255, 255, 255, .58);
  stroke: #8faeb4;
  stroke-width: 1.8;
}
.go-ray-svg .observation-panel,
.go-ray-svg .dependency-panel,
.go-ray-svg .dependency-stage {
  fill: #edf8fa;
  stroke: #5f8d96;
  stroke-width: 2;
}
.go-ray-svg .evidence-scale,
.go-ray-svg .evidence-tick,
.go-ray-svg .physical-stage-link,
.go-ray-svg .dependency-link {
  fill: none;
  stroke: #315f68;
  stroke-width: 2.4;
}
.go-ray-svg .detector,
.go-ray-svg .path-stage {
  fill: #fff6db;
  stroke: #a87300;
  stroke-width: 2.2;
}
.go-ray-svg .signal-bar { fill: #2f7e89; }
.go-ray-svg .update-stage {
  fill: #fff6db;
  stroke: #a87300;
  stroke-width: 2;
}
.go-ray-svg .update-link {
  stroke: #315f68;
  stroke-width: 2.2;
}
.go-ray-svg .update-label { fill: #16434c; font-size: 12px; font-weight: 800; }
.go-ray-svg .observer-eye {
  fill: #edf8fa;
  stroke: #245d68;
  stroke-width: 3;
}
.go-ray-svg .observer-pupil { fill: #173f47; }

.go-ray-svg .lamp-stand,
.go-ray-svg .star-rays,
.go-ray-svg .sign-post,
.go-ray-svg .pedestrian > path,
.go-ray-svg .closed-view,
.go-ray-svg .box-lid,
.go-ray-svg .reflector-strips {
  fill: none;
  stroke: #355f68;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.go-ray-svg .inactive-screen { fill: #18282d; stroke: #5f7379; stroke-width: 2; }
.go-ray-svg .planet { fill: #d9edf1; stroke: #35626b; stroke-width: 2.5; }
.go-ray-svg .planet-shadow { fill: #40565d; opacity: .7; }
.go-ray-svg .observer-world { fill: #8fc8d1; stroke: #35626b; stroke-width: 2; }
.go-ray-svg .dark-ball { fill: #2e3d42; stroke: #17272b; }
.go-ray-svg .bright-ball { fill: #fff4c7; }
.go-ray-svg .paint-swatch { fill: #202d31; stroke: #101a1d; stroke-width: 2; }
.go-ray-svg .bright-surface-mark { fill: none; stroke: #d69a14; stroke-width: 3; }
.go-ray-svg .sign-frame { fill: #f8fbfc; stroke: #9bb0b4; stroke-width: 2; }
.go-ray-svg .illuminated-sign { fill: #fff4c7; stroke: #9b6b14; stroke-width: 2.5; }
.go-ray-svg .led-sign { fill: #17343b; stroke: #0e2328; stroke-width: 2.5; }
.go-ray-svg .led-pixel { fill: #ffd166; stroke: #9a5a00; stroke-width: 1.5; }
.go-ray-svg .car-body { fill: #8ca5ab; stroke: #304f56; stroke-width: 2.5; }
.go-ray-svg .car-wheel { fill: #25383d; stroke: #102126; stroke-width: 2; }
.go-ray-svg .headlight-beam { fill: #ffe7a1; opacity: .52; stroke: #d9a62b; stroke-width: 1.5; }
.go-ray-svg .pedestrian circle { fill: #efbd91; stroke: #173f47; stroke-width: 2; }
.go-ray-svg .reflective-vest { fill: #f7d95e; stroke: #715b12; stroke-width: 2.5; }
.go-ray-svg .camera-body { fill: #40565d; stroke: #172a30; stroke-width: 3; }
.go-ray-svg .camera-lens { fill: #dceff3; stroke: #0b7285; stroke-width: 4; }
.go-ray-svg .camera-sensor { fill: #8dd0a6; stroke: #245d43; stroke-width: 2; }
.go-ray-svg .reflective-object { fill: #d8dde0; stroke: #344b51; stroke-width: 2.5; }
.go-ray-svg .road-sign { fill: #eef4f5; stroke: #496c73; stroke-width: 3; }

.go-ray-svg .unit-five-panel,
.go-ray-svg .unit-five-bundle-panel {
  fill: #f7fbfc;
  stroke: #b7cdd2;
  stroke-width: 2;
}

.go-ray-svg .unit-five-panel-label {
  fill: #173f47;
  font-size: 22px;
  font-weight: 800;
}

.go-ray-svg .unit-five-bulb,
.go-ray-svg .unit-five-source-dot,
.go-ray-svg .unit-five-sun {
  fill: #ffd166;
  stroke: #9a6500;
  stroke-width: 3;
}

.go-ray-svg .unit-five-bulb-base,
.go-ray-svg .unit-five-laser {
  fill: #718990;
  stroke: #274b53;
  stroke-width: 2.5;
}

.go-ray-svg .unit-five-given-ray,
.go-ray-svg .unit-five-bundle-ray {
  stroke-width: 3;
}

.go-ray-svg .unit-five-wavefront,
.go-ray-svg .unit-five-small-direction,
.go-ray-svg .unit-five-box-wall,
.go-ray-svg .unit-five-hole-mark,
.go-ray-svg .unit-five-candle-base,
.go-ray-svg .unit-five-bulb-contact,
.go-ray-svg .unit-five-pencil-line,
.go-ray-svg .unit-five-sun-rays,
.go-ray-svg .unit-five-local-light {
  fill: none;
  stroke: #315d66;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.go-ray-svg .unit-five-small-direction { marker-end: url(#arrow); }
.go-ray-svg .unit-five-box-wall { stroke-width: 8; }
.go-ray-svg .unit-five-hole-mark { stroke: #9a6500; stroke-width: 4; }
.go-ray-svg .unit-five-candle { fill: #ffcf65; stroke: #985f08; stroke-width: 3; }
.go-ray-svg .unit-five-labelled-point { fill: #fff; stroke: #0b7285; stroke-width: 3; }
.go-ray-svg .unit-five-point-label { fill: #16434c; font-size: 20px; font-weight: 800; }

.go-ray-svg .unit-five-moon {
  fill: #ecf1f2;
  stroke: #607981;
  stroke-width: 3;
}

.go-ray-svg .unit-five-craters {
  fill: none;
  stroke: #a0b1b5;
  stroke-width: 3;
}

.go-ray-svg .unit-five-screen {
  fill: #f9fcfd;
  stroke: #476b73;
  stroke-width: 3;
}

.go-ray-svg .unit-five-glass-bulb {
  fill: rgba(255, 209, 102, .22);
  stroke: #9a6500;
  stroke-width: 3;
}

.go-ray-svg .unit-five-filament {
  fill: none;
  stroke: #d77800;
  stroke-width: 4;
}

.go-ray-svg .unit-five-paper {
  fill: #fffef8;
  stroke: #a9b7b7;
  stroke-width: 2;
}

.go-ray-svg .unit-five-beam-band,
.go-ray-svg .unit-five-sunbeam,
.go-ray-svg .unit-five-narrow-beam {
  fill: rgba(255, 209, 102, .48);
  stroke: #d29a1c;
  stroke-width: 2;
}

.go-ray-svg .unit-five-pencil-line {
  stroke: #293d42;
  stroke-width: 2;
}

.go-ray-svg .unit-five-curtain-panel {
  fill: #6f8790;
  stroke: #294b53;
  stroke-width: 3;
}

.go-ray-svg .unit-five-dust {
  fill: #fff4c7;
  stroke: #a46b00;
  stroke-width: 1.5;
}

.go-ray-svg .unit-five-beam-a { fill: rgba(255, 190, 70, .52); stroke: #d48100; stroke-width: 2; }
.go-ray-svg .unit-five-beam-b { fill: rgba(92, 190, 210, .42); stroke: #0b7285; stroke-width: 2; }
.go-ray-svg .unit-five-crossing-point { fill: #fff; stroke: #5b7379; stroke-width: 2; }
.go-ray-svg .unit-five-laser-aperture { fill: #17282d; stroke: #0b7285; stroke-width: 3; }
.go-ray-svg .unit-five-earth { fill: #8fd1df; stroke: #245d68; stroke-width: 3; }
.go-ray-svg .unit-five-earth-land { fill: #75b67e; stroke: #39794a; stroke-width: 2; }
.go-ray-svg .unit-five-local-light { stroke: #e2a622; marker-end: url(#arrow); }

.geometric-optics-player .lesson-checkpoint {
  margin: 1.35rem 0;
  padding: 1.1rem 1.15rem;
  border: 1px solid #b8d9de;
  border-inline-start: 5px solid #0b7285;
  border-radius: 16px;
  background: #f4fbfc;
}

.geometric-optics-player .lesson-checkpoint h3 {
  margin: 0 0 .85rem;
  color: #16343b;
  font-size: 1.05rem;
}

.geometric-optics-player .lesson-checkpoint-options {
  display: grid;
  gap: .55rem;
}

.geometric-optics-player .lesson-checkpoint-options button {
  padding: .72rem .9rem;
  border: 1px solid #a9cbd1;
  border-radius: 12px;
  color: #16343b;
  background: #fff;
  text-align: start;
  line-height: 1.45;
  cursor: pointer;
}

.geometric-optics-player .lesson-checkpoint-options button:hover:not(:disabled),
.geometric-optics-player .lesson-checkpoint-options button:focus-visible {
  border-color: #0b7285;
  box-shadow: 0 0 0 3px rgba(11, 114, 133, .13);
}

.geometric-optics-player .lesson-checkpoint-options button.correct {
  border-color: #247b53;
  background: #eaf8f0;
}

.geometric-optics-player .lesson-checkpoint-options button.incorrect {
  border-color: #b56634;
  background: #fff3e9;
}

.geometric-optics-player .lesson-checkpoint-feedback {
  margin: .8rem 0 0;
  font-weight: 650;
  line-height: 1.55;
}

.geometric-optics-player .lesson-checkpoint-feedback.complete { color: #17623f; }
.geometric-optics-player .lesson-checkpoint-feedback.retry { color: #8a4f00; }

.lesson-question-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: .8rem;
}

.geometric-optics-drawing-upload {
  display: grid;
  gap: .8rem;
  margin-top: 1rem;
}

.geometric-optics-drawing-upload > p {
  margin: 0;
  color: #294d55;
  line-height: 1.55;
}

.geometric-optics-drawing-dropzone {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: 1.25rem;
  border: 2px solid #83b8c1;
  border-radius: 16px;
  color: #173f47;
  background: #f4fbfc;
  text-align: center;
  cursor: pointer;
}

.geometric-optics-drawing-dropzone:hover,
.geometric-optics-drawing-dropzone:focus-within,
.geometric-optics-drawing-dropzone.dragging {
  border-color: #0b7285;
  box-shadow: 0 0 0 4px rgba(11, 114, 133, .12);
}

.geometric-optics-drawing-dropzone.processing { cursor: progress; opacity: .76; }
.geometric-optics-drawing-dropzone input { max-width: 100%; }
.geometric-optics-drawing-dropzone span { font-weight: 750; }
.geometric-optics-drawing-dropzone small { color: #536f75; }

.geometric-optics-drawing-preview {
  display: grid;
  gap: .45rem;
  justify-items: center;
  margin: 0;
  padding: .75rem;
  border: 1px solid #c1d7db;
  border-radius: 14px;
  background: #fff;
}

.geometric-optics-drawing-preview.hidden { display: none; }
.geometric-optics-drawing-preview img { display: block; max-width: min(100%, 620px); max-height: 460px; border-radius: 8px; }
.geometric-optics-drawing-preview figcaption { color: #365b63; font-weight: 650; }

.geometric-optics-diagram-criteria {
  display: grid;
  gap: .45rem;
  margin: .75rem 0;
  padding-inline-start: 1.25rem;
}

.geometric-optics-diagram-criteria .met { color: #17623f; }
.geometric-optics-diagram-criteria .missing { color: #8a4f00; }
.geometric-optics-drawing-solution { margin-top: 1rem; }
.geometric-optics-drawing-solution > p { line-height: 1.55; }

@media (max-width: 720px) {
  .go-controls { grid-template-columns: 1fr; }
  .go-ray-svg { min-height: 210px; }
  .lesson-question-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .go-ray-svg *, .go-lab * { animation: none !important; transition: none !important; }
}