/* LSD lesson. All rules scoped under .lsd-* */
.lsd-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lsd-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.lsd-hero img { width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.lsd-lab { fill: var(--dim); font: 600 13px var(--sans); text-anchor: middle; }

/* the dose ladder */
.lsd-ladder { display: block; width: 100%; max-width: 330px; height: auto; overflow: visible; }
.lsd-ax { stroke: var(--line-strong); stroke-width: 2; }
.lsd-tk { stroke: var(--line-strong); stroke-width: 2; }
.lsd-tl { fill: var(--dim); font: 600 13px var(--sans); text-anchor: end; }
.lsd-erg { fill: var(--faint); font: 600 13px var(--sans); }
.lsd-you path { fill: var(--gold); }
.lsd-truth, .lsd-hof { opacity: 0; transition: opacity .4s; }
.lsd-truth rect { fill: var(--mint); }
.lsd-truth text { fill: var(--mint); font: 700 13px var(--sans); }
.lsd-hof circle { fill: none; stroke: var(--violet-bright); stroke-width: 2.5; }
.lsd-hof text { fill: var(--violet-bright); font: 700 13px var(--sans); }
.lsd-ladder.lsd-shown .lsd-hof { opacity: 1; }
.lsd-ladder.lsd-shown2 .lsd-truth { opacity: 1; }

/* the salt */
.lsd-salt { display: block; width: 100%; max-width: 330px; height: auto; overflow: visible; }
.lsd-pan { fill: rgba(169,155,255,.12); stroke: rgba(169,155,255,.6); stroke-width: 2; }
.lsd-pole { stroke: rgba(169,155,255,.6); stroke-width: 3; }
.lsd-grain .f { fill: #F4F1FF; }
.lsd-grain .l { fill: #CFC8EE; }
.lsd-grain .r { fill: #ABA2D6; }
.lsd-third { opacity: 0; transition: opacity .4s; }
.lsd-third .lsd-grain .f, .lsd-third .lsd-grain .l, .lsd-third .lsd-grain .r { fill: var(--mint); }
.lsd-salt.lsd-cutshow .lsd-third { opacity: 1; }

/* why it spread */
.lsd-cmp { display: block; width: 100%; max-width: 300px; height: auto; overflow: visible; }
.lsd-mesc { fill: rgba(169,155,255,.18); stroke: rgba(169,155,255,.6); stroke-width: 2; }
.lsd-lsd { fill: var(--gold); }
.lsd-ring2 { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 3 3; }
.lsd-cmp.lsd-lit .lsd-ring2 { stroke-dasharray: none; stroke-width: 2.5; }

@media (max-height: 700px) {
  .lsd-ladder { max-width: 290px; }
  .lsd-hero img { max-height: 26vh; }
}