/* Facial Symmetry lesson. All rules scoped under .fsy-* */
.fsy-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fsy-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }

/* the photo */
.fsy-pic { position: relative; width: 250px; aspect-ratio: 480 / 576; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong); }
.fsy-pic canvas, .fsy-pic img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fsy-line { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; background: var(--gold); box-shadow: 0 0 8px rgba(252,192,80,.8); transform-origin: top; scale: 1 0; transition: scale 1.2s cubic-bezier(.4,0,.2,1); }
.fsy-pic.lined .fsy-line { scale: 1 1; }
.fsy-half { position: absolute; top: 0; height: 100%; width: 50%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.fsy-half.l { left: 0; }
.fsy-half.r { right: 0; }
.fsy-half:disabled { cursor: default; }
.fsy-tag { min-height: 20px; font: 800 14px var(--sans); color: var(--gold); text-align: center; }

/* the face pick */
.fsy-sc > .choices.pics { width: 100%; max-width: 320px; gap: 18px; }
.fsy-sc > .choices.pics img, .fsy-sc > .choices.pics canvas { width: 100%; height: 190px; object-fit: cover; object-position: 50% 30%; border-radius: 10px; display: block; }

/* compare */
.fsy-cmp { width: 250px; display: flex; flex-direction: column; gap: 6px; }
.fsy-cw { position: relative; width: 100%; aspect-ratio: 480 / 576; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong); touch-action: none; cursor: ew-resize; }
.fsy-cw img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.fsy-edge { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--gold); box-shadow: 0 0 6px rgba(252,192,80,.7); pointer-events: none; }
.fsy-edge b { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.fsy-caps { display: flex; justify-content: space-between; font: 700 13px var(--sans); color: var(--dim); }

/* the twins */
.fsy-twins, .fsy-pk .choices.fsy-two { display: flex; flex-direction: row; justify-content: center; gap: 18px; width: 100%; }
.fsy-pk { width: 100%; }
.fsy-pk .choice { padding: 4px; min-height: 0; background: transparent; border-color: transparent; box-shadow: none; justify-content: center; }
.fsy-pk .choice.right { border-color: var(--mint); background: rgba(63,214,154,.08); }
.fsy-pk .choice.wrong { border-color: var(--red); background: rgba(216,85,85,.08); }
.fsy-kid { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 0; background: none; cursor: pointer; }
.fsy-kid svg { width: 140px; height: 164px; display: block; overflow: visible; }
.fsy-kid b { font: 800 15px var(--sans); color: var(--text); }
.fsy-kid span { min-height: 18px; font: 700 13px var(--sans); color: var(--dim); }
.fsy-kid span.ill { color: var(--streak); }
.fsy-face .skin { fill: #E9B48F; }
.fsy-face .hair { fill: #3A2618; }
.fsy-face .ink { fill: #2A1A12; }
.fsy-face .line { fill: none; stroke: #2A1A12; stroke-width: 3; stroke-linecap: round; }
.fsy-face .lip { fill: none; stroke: #B8564F; stroke-width: 3.4; stroke-linecap: round; }
.fsy-face .mid { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0; transition: opacity .4s; }
.fsy-face.guide .mid { opacity: .9; }

@media (max-height: 700px) {
  .fsy-pic, .fsy-cmp { width: 214px; }
  .fsy-kid svg { width: 122px; height: 142px; }
  .fsy-sc > .choices.pics img, .fsy-sc > .choices.pics canvas { height: 150px; }
}