/* Locard's exchange principle lesson. All rules scoped under .lcp-* */
.lcp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lcp-note { font-size: 12px; color: var(--faint); text-align: center; }
.lcp-hero img { display: block; width: 280px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }

.lcp-cols { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lcp-col { display: flex; flex-direction: column; gap: 6px; }
.lcp-h { font: 700 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 2px; }
.lcp-tr { font: 600 13px/1.25 var(--sans); color: var(--text); padding: 8px 10px; border-radius: 10px; background: rgba(234, 227, 215, .06); border: 1px solid var(--line); transition: opacity .25s, transform .25s, border-color .25s; }
.lcp-tr.out { opacity: 0; transform: translateY(-4px); }
.lcp-tr.new { border-color: var(--gold); color: var(--gold); }
.lcp-count { font: 600 14px/1.2 var(--sans); color: var(--dim); }
.lcp-count b { font-size: 20px; color: var(--gold); }
.lcp-gear { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lcp-gear .btn { padding-left: 4px; padding-right: 4px; font-size: 14px; }
.lcp-gear .btn.lcp-on { border-color: var(--mint); color: var(--mint); box-shadow: 0 5px 0 var(--mint); opacity: 1; }

.lcp-pair { display: flex; gap: 18px; justify-content: center; }
.lcp-slide { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 130px; padding: 10px 6px; border-radius: 16px; background: rgba(234, 227, 215, .05); border: 1px solid var(--line); }
.lcp-slide span { font: 600 13px/1.2 var(--sans); color: var(--dim); text-align: center; }
.lcp-fib { width: 60px; height: 120px; }
.lcp-fib path { fill: none; stroke: #D8545A; stroke-width: 9; stroke-linecap: round; }
.lcp-fib path.tw { stroke: #F2A3A0; stroke-width: 3; stroke-dasharray: 3 7; }

@media (max-height: 700px) {
  .lcp-hero img { max-height: 150px; }
  .lcp-tr { padding: 6px 8px; }
  .lcp-sc { gap: 8px; }
  .lcp-fib { height: 96px; }
}