/* Fingerprint lesson. All rules scoped under .fgp-* */
.fgp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fgp-note { font-size: 12px; color: var(--faint); text-align: center; }
.fgp-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)); }
.fgp-print { display: block; width: 100%; height: auto; }
.fgp-r { fill: none; stroke: #D9CFC0; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fgp-print.crime .fgp-r { stroke: #B8AE9F; }
.fgp-edge { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 5; }
.fgp-m { fill: var(--gold); stroke: #0A0E1A; stroke-width: 2; }
.fgp-o { fill: none; stroke-width: 3.5; }
.fgp-o.ok { stroke: var(--mint); }
.fgp-o.no { stroke: var(--red); }
.fgp-lab { display: block; text-align: center; font: 700 13px/1.2 var(--sans); color: var(--dim); margin-top: 3px; }
.fgp-crime { width: 150px; }
.fgp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 340px; }
.fgp-sus { min-width: 0; }
.fgp-print.solo { width: 150px; }
.fgp-print.zoom { width: min(100%, 300px); border-radius: 18px; background: rgba(234, 227, 215, .04); }
.fgp-print.zoom .fgp-r { stroke-width: 2.2; }
.fgp-ring { fill: rgba(252, 192, 80, .08); stroke: var(--gold); stroke-width: 1.6; }
.fgp-hit { fill: transparent; cursor: pointer; }
.fgp-spot.right .fgp-ring { stroke: var(--mint); fill: rgba(63, 214, 154, .15); }
.fgp-spot.wrong .fgp-ring { stroke: var(--red); }
.fgp-spot.off { opacity: .35; }
.fgp-abc.choices { flex-direction: row; }
.fgp-abc .choice { flex: 1; justify-content: center; }

@media (max-height: 700px) {
  .fgp-hero img { max-height: 150px; }
  .fgp-crime { width: 130px; }
  .fgp-row { max-width: 330px; gap: 12px; }
  .fgp-print.zoom { width: 230px; }
  .fgp-print.solo { width: 120px; }
}