/* Special Theory of Relativity lesson. All rules scoped under .srl-* */
.srl-sc, .srl-mm, .srl-lc { position: relative; width: 100%; max-width: 360px; margin: 0 auto; }
.srl-sc svg, .srl-mm svg, .srl-lc svg { display: block; width: 100%; height: auto; overflow: visible; }

/* the train */
.srl-sc { border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #1B2246 0%, #2A2F5E 55%, #3A3566 100%); cursor: pointer; }
.srl-gnd { fill: #171C2E; }
.srl-rail { stroke: rgba(234,227,215,.4); stroke-width: 2; }
.srl-car { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 1.5; }
.srl-win { fill: rgba(255,240,200,.75); }
.srl-wh { fill: #0E1222; stroke: rgba(234,227,215,.55); stroke-width: 2; }
.srl-tag { font: 700 13px var(--sans); fill: var(--text); }
.srl-kid circle, .srl-you circle { fill: #F3C9A0; }
.srl-kid path, .srl-you path { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.srl-you rect { fill: #CFC8BC; }
.srl-yt { font: 700 13px var(--sans); fill: var(--text); text-anchor: middle; }
.srl-plat { fill: #3A3F58; stroke: rgba(234,227,215,.25); }
.srl-held, .srl-ball { fill: #FFFFFF; stroke: #C9C2B6; stroke-width: 1; }
.srl-ball { opacity: 0; }
.srl-thrown .srl-held { opacity: 0; }
.srl-thrown .srl-ball { opacity: 1; }
.srl-torch { fill: #D9D2C6; opacity: 0; }
.srl-lines line { stroke: rgba(234,227,215,.45); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.srl-torchon .srl-held { opacity: 0; }
.srl-torchon .srl-torch, .srl-torchon .srl-lines line { opacity: 1; }
.srl-beam { stroke: #FFE7A6; stroke-width: 3; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 4px rgba(252,192,80,.9)); }
.srl-lit .srl-beam { opacity: 1; }
.srl-gun { position: absolute; top: 8px; right: 8px; min-width: 112px; padding: 6px 10px; border-radius: 12px; background: rgba(10,14,26,.78); border: 1px solid var(--line-strong); text-align: right; line-height: 1.15; }
.srl-gun span { display: block; font: 600 12px var(--sans); color: var(--dim); }
.srl-gun b { display: block; font: 800 20px var(--sans); color: var(--faint); }
.srl-gun em { display: block; font: 600 12px var(--sans); font-style: normal; color: var(--dim); min-height: 14px; }
.srl-read .srl-gun b { color: var(--gold); }

/* the chase */
.srl-ch { position: relative; width: 100%; max-width: 380px; margin: 0 auto; height: 210px; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at 40% 60%, #1A1F3E, #070A14 75%); }
.srl-ch canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.srl-ro { position: absolute; left: 0; right: 0; top: 10px; text-align: center; line-height: 1.2; }
.srl-ro span { display: block; font: 600 12.5px var(--sans); color: var(--dim); }
.srl-ro b { display: block; font: 800 18px var(--sans); color: var(--gold); }

/* Michelson and Morley */
.srl-lb { font: 600 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.srl-lb.srl-l { text-anchor: start; }
.srl-ar { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.srl-src { fill: #CFC8BC; }
.srl-path { stroke: rgba(252,192,80,.35); stroke-width: 2; stroke-dasharray: 4 5; }
.srl-split { stroke: #9FD3FF; stroke-width: 3; stroke-linecap: round; }
.srl-mir { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.srl-pa, .srl-pb { fill: #FFE7A6; opacity: 0; filter: drop-shadow(0 0 4px rgba(252,192,80,.9)); }
.srl-go .srl-pa, .srl-go .srl-pb { opacity: 1; }
.srl-tie { font: 800 14px var(--sans); fill: var(--gold); text-anchor: middle; opacity: 0; transition: opacity .3s; }
.srl-back .srl-tie { opacity: 1; }

/* light clocks */
.srl-lc .srl-car { fill: rgba(123,92,253,.55); }
.srl-post { fill: #2A3150; stroke: rgba(234,227,215,.25); }
.srl-lc .srl-plat { fill: #3A3F58; stroke: none; }
.srl-mr { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.srl-tp, .srl-pp { fill: #FFE7A6; filter: drop-shadow(0 0 4px rgba(252,192,80,.9)); }
.srl-zig, .srl-str { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 5 4; opacity: 0; transition: opacity .5s; }
.srl-trail .srl-zig, .srl-trail .srl-str { opacity: .85; }
.srl-cap { font: 600 14px var(--sans); fill: var(--dim); text-anchor: end; }
.srl-tags { position: absolute; inset: 0; pointer-events: none; }
.srl-tags > span { position: absolute; left: 0; width: 28%; font: 700 13px/1.2 var(--sans); color: var(--text); }
.srl-t1 { top: 18%; } .srl-t2 { top: 68%; }
.srl-tags .choices.srl-pk { position: absolute; inset: 0; display: block; pointer-events: auto; }
.srl-pk .choice { position: absolute; left: 0; width: 29%; min-height: 64px; padding: 6px 8px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; font-size: 14px; line-height: 1.15; }
.srl-pk .choice:nth-child(1) { top: 60%; }
.srl-pk .choice:nth-child(2) { top: 10%; }
.srl-pk .choice b { font-weight: 800; }
.srl-pk .choice em { font: 700 13px var(--sans); font-style: normal; color: var(--gold); }

@media (max-height: 700px) {
  .srl-sc, .srl-mm { max-width: 330px; }
  .srl-lc { max-width: 300px; }
  .srl-ch { height: 180px; }
}