/* Intestinal villus lesson. All rules scoped under .vil-* */
.vil-tube { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.vil-ends { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.vil-ends span:first-child::after { content: ' →'; }
.vil-ends span:last-child::after { content: ' →'; }
.vil-cv { display: block; width: 100%; aspect-ratio: 340 / 196; border-radius: 12px; background: var(--surface); cursor: pointer; touch-action: manipulation; }
.vil-cts { display: flex; justify-content: center; gap: 10px; }
.vil-ct { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--raised); font-size: 13px; font-weight: 700; color: var(--dim); }
.vil-ct b { font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; }
.vil-in b { color: var(--gold); }
.vil-tube.vil-done .vil-in { box-shadow: 0 0 0 1.5px rgba(252, 192, 80, .55); }

/* ---------- zoom ---------- */
.vil-zoom { position: relative; width: 100%; max-width: 340px; margin: 0 auto; display: flex; justify-content: center; }
.vil-flat { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--surface); overflow: hidden; }
.vil-w { fill: #B9566F; }
.vil-f { fill: #B9566F; stroke: #F2A3B5; stroke-width: 1.2; cursor: pointer; }
.vil-f.vil-pick { fill: #D97890; }
.vil-one { display: block; width: 100%; max-width: 300px; max-height: 262px; height: auto; overflow: visible; }
.vil-brush { stroke: #FCC050; stroke-width: 1.6; stroke-linecap: round; fill: none; opacity: .9; }
.vil-skin { fill: #D97890; stroke: #F2A3B5; stroke-width: 1.5; }
.vil-core { fill: #9E4A62; }
.vil-cap { fill: none; stroke: #E0484E; stroke-width: 7; stroke-linecap: round; opacity: .9; }
.vil-lab { fill: var(--text); font: 600 15px var(--sans); }
.vil-gold { fill: var(--gold); }
.vil-red { fill: #FF8A8E; }
.vil-arrow { stroke: var(--gold); stroke-width: 2; fill: none; stroke-linecap: round; }
.vil-dot { fill: #FCC050; stroke: #FFE3A3; stroke-width: 1; }
.vil-dot.vil-pro { fill: #A99BFF; stroke: #D8D0FF; }

.vil-art { padding: 14px 0 24px; }
.vil-art img { display: block; width: 240px; max-width: 100%; max-height: 30vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 10px 18px rgba(123, 92, 253, .3)); }

/* ---------- wiper ---------- */
.vil-wipe { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.vil-wf { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 14px; background: var(--surface); touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.vil-wf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.vil-edge { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, .45); pointer-events: none; }
.vil-edge b { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.vil-edge b::before, .vil-edge b::after { content: ''; position: absolute; top: 10px; border: 5px solid transparent; }
.vil-edge b::before { left: 1px; border-right-color: #7B5CFD; }
.vil-edge b::after { right: 1px; border-left-color: #7B5CFD; }
.vil-caps { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--dim); }
.vil-caps span:first-child { color: var(--text); }
.vil-nocts .vil-cts { visibility: hidden; }

@media (max-height: 700px) {
  .vil-one { max-height: 224px; }
  .vil-tube { max-width: 330px; }
  .vil-art img { max-height: 26vh; }
}