/* Benjamin Libet lesson. All rules scoped under .lbt-* */
.lbt-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lbt-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 300px; }
.lbt-hero img { display: block; width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }

/* ---------- the clock ---------- */
.lbt-clock { width: 250px; max-width: 72vw; aspect-ratio: 1; }
.lbt-clock svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lbt-face { fill: var(--surface); stroke: var(--line-strong); stroke-width: 3; }
.lbt-ticks line { stroke: var(--faint); stroke-width: 2; stroke-linecap: round; }
.lbt-ticks line.lbt-big { stroke: var(--dim); stroke-width: 3; }
.lbt-nums text { fill: var(--dim); font-family: var(--mono); font-size: 17px; text-anchor: middle; }
.lbt-hub { fill: var(--line-strong); }
.lbt-dot { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(252, 192, 80, .9)); }
.lbt-clock.lbt-hit .lbt-face { animation: lbtHit .5s ease-out; }
@keyframes lbtHit { 0% { stroke: var(--gold); stroke-width: 6; } 100% { stroke: var(--line-strong); stroke-width: 3; } }
.btn.lbt-now { font-size: 18px; }

/* ---------- the timeline ---------- */
.lbt-tl { width: 100%; max-width: 360px; }
.lbt-tl svg { display: block; width: 100%; height: auto; overflow: visible; }
.lbt-axis { stroke: var(--line-strong); stroke-width: 2; }
.lbt-tk { stroke: var(--line-strong); stroke-width: 2; }
.lbt-tkl, .lbt-movel { fill: var(--dim); font-size: 14px; text-anchor: middle; }
.lbt-movel { fill: var(--text); font-weight: 700; }
.lbt-move { stroke: var(--text); stroke-width: 2; stroke-dasharray: 4 4; opacity: .6; }
.lbt-rp { fill: none; stroke: var(--mint); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.rp-on .lbt-rp { opacity: 1; }
.lbt-veto { fill: rgba(252, 192, 80, .16); opacity: 0; transition: opacity .4s; }
.veto-on .lbt-veto { opacity: 1; }
.lbt-mk line { stroke-width: 2; }
.lbt-mk text { font-size: 14px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round; }
.lbt-you line { stroke: var(--violet-bright); } .lbt-you circle, .lbt-you text { fill: var(--violet-bright); }
.lbt-them line { stroke: var(--gold); } .lbt-them circle, .lbt-them text { fill: var(--gold); }
.lbt-rpm line { stroke: var(--mint); stroke-dasharray: 3 3; } .lbt-rpm circle, .lbt-rpm text { fill: var(--mint); }
.lbt-beep line { stroke: var(--streak); } .lbt-beep circle, .lbt-beep text { fill: var(--streak); }
.lbt-mk { animation: lbtIn .3s both; }
@keyframes lbtIn { from { opacity: 0; } }

/* ---------- the wobble model ---------- */
.lbt-plot { width: 100%; max-width: 360px; }
.lbt-plot svg { display: block; width: 100%; height: auto; }
.lbt-th { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 5; }
.lbt-thl { fill: var(--gold); font-size: 14px; font-weight: 700; }
.lbt-zero { stroke: var(--text); stroke-width: 2; stroke-dasharray: 4 4; opacity: .5; }
.lbt-run { fill: none; stroke: var(--violet-bright); stroke-width: 1.4; opacity: .5; stroke-linejoin: round; }
.lbt-run:first-child { stroke-width: 2.4; opacity: 1; }
.lbt-hit { fill: var(--gold); }
.lbt-avg { fill: none; stroke: var(--mint); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.avg-on .lbt-avg { opacity: 1; }
.avg-on .lbt-run { opacity: .22; }
.lbt-xl { fill: var(--dim); font-size: 14px; }
.lbt-xb { text-anchor: end; }
.by-move .lbt-xb { fill: var(--text); font-weight: 700; }
.lbt-clk { stroke: var(--streak); stroke-width: 2; stroke-dasharray: 4 4; }
.lbt-clkl { fill: var(--streak); font-size: 14px; font-weight: 700; text-anchor: middle; }
.lbt-cr { fill: none; stroke-width: 2.6; stroke-linejoin: round; }
.lbt-cra { stroke: var(--gold); } .lbt-crb { stroke: var(--violet-bright); }
.lbt-cf circle.lbt-fa, .lbt-cf text.lbt-fa { fill: var(--gold); }
.lbt-cf circle.lbt-sl, .lbt-cf text.lbt-sl { fill: var(--violet-bright); }
.lbt-cf text { font-size: 14px; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round; }

/* ---------- the two readings ---------- */
.lbt-two { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lbt-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 12px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); text-align: center; }
.lbt-card b { font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.lbt-card span { font-size: 14px; color: var(--dim); line-height: 1.3; }
.lbt-lib { border-color: var(--gold); } .lbt-sch { border-color: var(--mint); }
.lbt-card.lbt-dim span { color: var(--faint); }

@media (max-height: 700px) {
  .lbt-hero img { width: 230px; max-height: 28vh; }
  .lbt-clock { width: 200px; }
  .lbt-card { padding: 12px 10px; }
}