/* Time Dilation lesson. All rules scoped under .tdl-* */
.tdl-sky { position: relative; flex: 1; width: 100%; min-height: 300px; background: linear-gradient(180deg, #05070F 0%, #0C1230 55%, #1A1E3A 100%); cursor: pointer; overflow: hidden; }
.tdl-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* one muon */
.tdl-fall, .tdl-mt, .tdl-gps { position: relative; width: 100%; max-width: 340px; margin: 0 auto; }
.tdl-fall svg, .tdl-mt svg, .tdl-gps svg { display: block; width: 100%; height: auto; overflow: visible; }
.tdl-rule, .tdl-tk { stroke: rgba(234,227,215,.45); stroke-width: 2; }
.tdl-tl { font: 600 13px var(--sans); fill: var(--dim); }
.tdl-half { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 4; opacity: 0; transition: opacity .4s; }
.tdl-hl { font: 800 14px var(--sans); fill: var(--gold); text-anchor: end; opacity: 0; transition: opacity .4s; }
.tdl-gone .tdl-half, .tdl-gone .tdl-hl { opacity: 1; }
.tdl-trail { stroke: rgba(169,155,255,.45); stroke-width: 3; stroke-linecap: round; }
.tdl-ball { fill: var(--violet-bright); filter: drop-shadow(0 0 6px rgba(123,92,253,.9)); }
.tdl-face { fill: #F4EEE2; stroke: #CFC8BC; stroke-width: 1.5; }
.tdl-sweep { fill: var(--red); opacity: .85; }
.tdl-pop line { stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.tdl-gone .tdl-body { opacity: 0; transition: opacity .15s; }
.tdl-gone .tdl-pop line { opacity: 1; animation: tdl-burst .6s ease-out forwards; }
@keyframes tdl-burst { to { opacity: 0; } }

/* the mountain */
.tdl-hill { fill: #2A3150; stroke: rgba(234,227,215,.25); stroke-width: 1.5; }
.tdl-sea { stroke: #4C8BE8; stroke-width: 2; }
.tdl-slope { stroke: rgba(252,192,80,.45); stroke-width: 2.5; stroke-dasharray: 6 5; }
.tdl-ml { font: 700 13px var(--sans); fill: var(--text); }
.tdl-ml.tdl-r { text-anchor: end; }
.tdl-ctr rect { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1.5; }
.tdl-dot { fill: var(--violet-deep); }
.tdl-hit { fill: transparent; cursor: grab; touch-action: none; }
.tdl-pan { position: absolute; top: 0; right: 0; padding: 7px 11px; border-radius: 12px; background: rgba(10,14,26,.85); border: 1px solid var(--line-strong); text-align: right; line-height: 1.2; max-width: 160px; }
.tdl-pan span { display: block; font: 600 12px var(--sans); color: var(--dim); }
.tdl-pan b { display: block; font: 800 18px var(--sans); color: var(--text); }
.tdl-got { display: block; font: 800 14px var(--sans); font-style: normal; color: var(--gold); max-height: 0; overflow: hidden; transition: max-height .4s; }
.tdl-down .tdl-got { max-height: 40px; }

/* the sum */
.tdl-sum { display: flex; gap: 12px; justify-content: center; width: 100%; }
.tdl-sum > div { flex: 1; max-width: 160px; padding: 14px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.tdl-sum span { display: block; font: 600 13px/1.25 var(--sans); color: var(--dim); }
.tdl-sum b { display: block; margin-top: 6px; font: 800 40px var(--sans); color: var(--text); }
.tdl-sum .tdl-hi b { color: var(--gold); }

/* clocks on planes */
.tdl-hk { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tdl-hk svg { display: block; width: 200px; height: 200px; overflow: visible; }
.tdl-orb { fill: none; stroke: rgba(234,227,215,.18); stroke-width: 1.5; stroke-dasharray: 3 5; }
.tdl-land { fill: #3C8F6A; opacity: .8; }
.tdl-pole { fill: #F4EEE2; }
.tdl-spin, .tdl-spinh { fill: none; stroke: rgba(234,227,215,.5); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tdl-pw circle { fill: var(--violet-bright); stroke: #fff; stroke-width: 2; }
.tdl-ph circle { fill: #F4EEE2; stroke: #12182A; stroke-width: 2; }
.tdl-pe circle { fill: var(--gold); stroke: #fff; stroke-width: 2; }
.tdl-cks { display: flex; gap: 8px; justify-content: center; width: 100%; max-width: 360px; }
.tdl-cks > span { flex: 1; text-align: center; font: 700 13px var(--sans); color: var(--text); }
.tdl-cks > span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.tdl-kw::before { background: var(--violet-bright); } .tdl-kh::before { background: #F4EEE2; } .tdl-ke::before { background: var(--gold); }
.tdl-cks .choices.tdl-pk { flex-direction: row; gap: 8px; width: 100%; }
.tdl-pk .choice { flex: 1; min-height: 56px; padding: 8px 6px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; font-size: 14px; line-height: 1.15; }
.tdl-pk .choice b { font-weight: 800; }
.tdl-pk .choice b::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.tdl-pk .choice:nth-child(1) b::before { background: var(--violet-bright); }
.tdl-pk .choice:nth-child(2) b::before { background: #F4EEE2; }
.tdl-pk .choice:nth-child(3) b::before { background: var(--gold); }
.tdl-pk .choice em { font: 700 13px var(--sans); font-style: normal; color: var(--dim); }

/* GPS */
.tdl-orbit { fill: none; stroke: rgba(234,227,215,.3); stroke-width: 1.5; stroke-dasharray: 4 5; }
.tdl-panel { fill: #3B4FA8; stroke: #9FB2FF; stroke-width: 1; }
.tdl-bus { fill: var(--gold); }
.tdl-arrow { fill: none; stroke: var(--violet-bright); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tdl-sl { font: 800 14px var(--sans); fill: var(--text); text-anchor: middle; }
.tdl-res { font: 800 15px var(--sans); fill: var(--gold); text-anchor: middle; opacity: 0; transition: opacity .4s; }
.tdl-show .tdl-res { opacity: 1; }

@media (max-height: 700px) {
  .tdl-hk svg { width: 170px; height: 170px; }
  .tdl-fall { max-width: 280px; }
  .tdl-mt { max-width: 320px; }
}