/* Convergent evolution. All rules scoped under .cv-* */
.cv-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cv-cap { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }
.cv-hero { display: grid; place-items: center; }
.cv-hero img { width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.cv-photo { width: 100%; display: grid; place-items: center; }
.cv-photo img { width: 100%; max-width: 380px; max-height: 34vh; object-fit: contain; border-radius: 16px; display: block; }
.cv-photo.cv-white img { background: #EDE9E1; padding: 10px; box-sizing: border-box; }

/* the trio */
.cv-trio { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cv-trio figure { margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.cv-trio img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; display: block; }
.cv-trio figcaption { font-size: 14px; font-weight: 800; color: var(--text); }

/* silhouettes */
.cv-sil { fill: #A9B7C6; stroke: #0F2A40; stroke-width: 1.2; stroke-linejoin: round; }
.choices.pics .choice svg { width: 100%; height: auto; display: block; }
.cv-water { width: 100%; }
.cv-water svg { width: 100%; max-width: 380px; display: block; margin: 0 auto; border-radius: 14px; background: #1B4A70; }
.cv-flow path { stroke: rgba(210,236,255,.35); stroke-width: 2; stroke-dasharray: 8 8; fill: none; }
.cv-block { fill: #A9B7C6; stroke: #0F2A40; stroke-width: 1.2; }
.cv-wake { fill: none; stroke: rgba(252,192,80,.9); stroke-width: 3; stroke-linecap: round; }

/* tails */
.cv-tailbox { width: 100%; }
.cv-tails { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cv-tails figure { margin: 0; padding: 10px 8px; border-radius: 14px; background: #1B4A70; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cv-tails svg { width: 100%; display: block; overflow: visible; }
.cv-tails figcaption { font-size: 12px; font-weight: 700; color: var(--text); text-align: center; }
.cv-beat { font-size: 14px; font-weight: 800; color: var(--gold); visibility: hidden; }
.cv-tailbox.go .cv-beat { visibility: visible; }
.cv-tl { transform-box: view-box; transform-origin: 88px 45px; }
.cv-dl { transform-box: view-box; transform-origin: 96px 45px; }
.cv-tailbox.go .cv-tl { animation: cvWag .6s ease-in-out 4 alternate; }
.cv-tailbox.go .cv-dl { animation: cvWag .6s ease-in-out 4 alternate; }
@keyframes cvWag { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }


/* retina */
.cv-ret svg { width: 100%; max-width: 360px; display: block; margin: 0 auto; border-radius: 14px; background: #2A1E2E; }
.cv-light path { stroke: var(--gold); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.cv-lt { fill: var(--text); font: 700 13px var(--sans); }
.cv-rod { fill: var(--violet); }
.cv-wire { fill: none; stroke: #F2D98A; stroke-width: 2; }
.cv-nerve { fill: #F2D98A; }
.cv-hole rect { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 4 3; }
.cv-hole text { fill: var(--red); font: 800 13px var(--sans); }
.cv-octo.on svg { box-shadow: 0 0 0 2px var(--mint); }

/* blind spot test */
.cv-test { position: relative; width: 100%; height: 110px; border-radius: 14px; background: #F4F1EA; }
.cv-plus { position: absolute; left: 8%; top: 50%; transform: translate(-50%, -50%); font: 800 34px/1 var(--sans); color: #111; font-style: normal; }
.cv-dot { position: absolute; left: 90%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #111; }
.cv-steps { margin: 0; padding: 0 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--text); align-self: flex-start; }

/* wings */
.cv-wingbox { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cv-wings { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cv-wings figure { margin: 0; padding: 6px 4px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.cv-wings svg { width: 100%; display: block; }
.cv-wings figcaption { font-size: 14px; font-weight: 800; color: var(--text); }
.cv-wings span { font-size: 12px; line-height: 1.2; color: var(--dim); }
.cv-arm { stroke: var(--gold); stroke-width: 5; stroke-linecap: round; fill: none; }
.cv-dig { stroke: #EDE4D0; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.cv-dig.s { stroke-width: 2; }
.cv-mem { fill: rgba(123,92,253,.35); stroke: rgba(160,140,255,.8); stroke-width: 1; }
.cv-feath path { stroke: #C9D3DE; stroke-width: 5; stroke-linecap: round; fill: none; }
.cv-key { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); }
.cv-key i { width: 22px; height: 5px; border-radius: 3px; background: var(--gold); }

@media (max-height: 700px) {
  .cv-photo img { max-height: 28vh; }
  .cv-test { height: 90px; }
  .cv-steps { font-size: 14px; }
}