/* 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-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 forecast ---------- */
.lpd-fc { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-dasharray: 2 4; stroke-linecap: round; opacity: .55; }
.lpd-bin.lpd-fcb { stroke: var(--text); stroke-width: 1.6; stroke-dasharray: 3 3; }

/* ---------- measure finer ---------- */
.lpd-fine { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lpd-dots { display: grid; grid-template-columns: repeat(6, 40px); gap: 8px; }
.lpd-dots i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--dim); border: 2px dashed var(--line-strong); transition: background .25s, border-color .25s; }
.lpd-dots i.lpd-ok { background: var(--gold); border: 2px solid var(--gold); color: #3A2604; }
.lpd-dots i.lpd-off { background: var(--violet-bright); border: 2px solid var(--violet-bright); color: #fff; }
.lpd-res { font-size: 17px; font-weight: 700; text-align: center; }
.lpd-res b { color: var(--violet-bright); font-family: var(--mono); }

@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-dots { grid-template-columns: repeat(6, 34px); gap: 6px; }
  .lpd-dots i { width: 34px; height: 34px; }
}