/* Laplace's Demon lesson. All rules scoped under .lpd-* */
.lpd-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lpd-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 300px; }
.lpd-hero img { display: block; width: 260px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }
.lpd-hero.lpd-small img { width: 170px; max-height: 22vh; }
.lpd-portrait img { display: block; width: 220px; max-height: 36vh; object-fit: cover; border-radius: 14px; border: 2px solid var(--line-strong); }

/* ---------- the coin machine ---------- */
.lpd-mach { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.lpd-mach svg { width: 240px; max-width: 100%; height: auto; overflow: visible; }
.lpd-box { fill: var(--raised); stroke: var(--line-strong); stroke-width: 2; }
.lpd-spring { fill: none; stroke: var(--dim); stroke-width: 3; stroke-linejoin: round; }
.lpd-plat { fill: var(--dim); }
.lpd-coin ellipse { fill: #FCC050; stroke: #FFE08A; stroke-width: 3; }
.lpd-coin text { fill: #3A2604; font-family: var(--mono); font-weight: 700; font-size: 20px; text-anchor: middle; }
.lpd-tally { display: grid; grid-template-columns: repeat(10, 26px); gap: 5px; }
.lpd-t { width: 26px; height: 26px; border-radius: 50%; border: 2px dashed var(--line-strong); display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-weight: 700; font-size: 13px; color: #3A2604; }
.lpd-t.lpd-on, .lpd-t.on { background: var(--gold); border: 2px solid var(--gold); }

/* ---------- the peg board ---------- */
.lpd-board { width: 100%; display: flex; justify-content: center; }
.lpd-board svg { width: 280px; max-width: 100%; max-height: 46vh; height: auto; }
.lpd-frame { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.lpd-peg { fill: var(--dim); }
.lpd-div { stroke: var(--line-strong); stroke-width: 2; }
.lpd-bin { fill: transparent; transition: fill .3s; }
.lpd-bin.lpd-in { fill: rgba(252, 192, 80, .55); }
.lpd-bin.lpd-in2 { fill: rgba(169, 155, 255, .55); }
.lpd-aim { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 5; }
.lpd-trail { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.lpd-ta { stroke: var(--gold); }
.lpd-tb { stroke: var(--violet-bright); stroke-dasharray: 5 4; }
.lpd-ba { fill: var(--gold); }
.lpd-bb { fill: var(--violet-bright); }

/* ---------- the gap, bounce by bounce ---------- */
.lpd-gaps { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.lpd-gr { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 8px; font-size: 14px; transition: opacity .25s; }
.lpd-gr span { color: var(--dim); font-weight: 700; }
.lpd-gr i { display: block; height: 10px; width: var(--w); border-radius: 5px; background: var(--violet-bright); }
.lpd-gr:last-child i { background: var(--gold); }
.lpd-gr b { font-family: var(--mono); font-size: 13px; }
.lpd-gr.lpd-dim { opacity: .12; }
.lpd-two .lpd-gr { grid-template-columns: 1fr auto; padding: 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); }
.lpd-two .lpd-gr.lpd-gold { border-color: var(--gold); }

/* ---------- atoms ---------- */
.lpd-atoms { display: grid; grid-template-columns: repeat(4, 56px); gap: 14px; }
.lpd-atom { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 34%, #D9FFE9, #3FD69A 55%, #1B7A55); box-shadow: 0 0 14px rgba(63, 214, 154, .45); transition: transform .25s, opacity .25s, background .25s; }
.lpd-atom b { width: 16px; height: 16px; border-radius: 50%; background: rgba(11, 46, 32, .6); }
.lpd-atom.lpd-gone { background: var(--raised); box-shadow: none; transform: scale(.7); opacity: .45; }

/* ---------- the demon speaks ---------- */
.lpd-bubble { max-width: 280px; padding: 14px 18px; border-radius: 18px; background: var(--raised); border: 2px solid var(--gold); font-size: 17px; text-align: center; }
.lpd-bubble b { color: var(--gold); }

@media (max-height: 700px) {
  .lpd-hero img { width: 200px; max-height: 28vh; }
  .lpd-portrait img { width: 170px; max-height: 30vh; }
  .lpd-mach svg { width: 200px; }
  .lpd-tally { grid-template-columns: repeat(10, 22px); gap: 4px; }
  .lpd-t { width: 22px; height: 22px; font-size: 12px; }
  .lpd-board svg { max-height: 40vh; }
  .lpd-atoms { grid-template-columns: repeat(4, 46px); gap: 12px; }
  .lpd-atom { width: 46px; height: 46px; }
}