.vision-guide { display: none; }
.lens-lab[data-scene="comparison"] .vision-guide { display: block; padding: 32px; background: #f7fafc; }
.lens-lab[data-scene="comparison"] > :is(.lens-geometry-controls, .lab-instruction, .lens-comparison, .lab-controls, .prescription-controls, .lab-note) { display: none; }
.vision-guide-intro { text-align: center; }
.vision-guide-intro h3 { font-size: 30px; font-weight: 500; letter-spacing: -1px; }
.vision-guide-intro p { max-width: 640px; margin: 12px auto 24px; font-size: 15px; color: #526779; }
.vision-distance { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; }
.vision-distance button { min-height: 54px; border: 1px solid #b6cedd; border-radius: 6px; background: white; color: #163b56; padding: 10px 22px; font-size: 14px; font-weight: 600; }
.vision-distance button small { display: block; font-size: 11px; font-weight: 400; }
.vision-distance button[aria-pressed="true"] { background: #1e6a94; color: white; border-color: #1e6a94; }
.vision-distance button:hover { box-shadow: inset 0 0 0 1px #1e6a94; }
.vision-guide-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vision-guide-card { background: white; padding: 24px; border: 1px solid #cfdfeb; border-radius: 12px; }
.vision-guide-card h4 { font-size: 25px; font-weight: 600; text-align: center; }
.vision-guide-subtitle { text-align: center; font-size: 12px; color: #526779; margin-top: 6px; min-height: 20px; }
.vision-frame { display: block; width: 100%; height: auto; margin: 10px auto 0; }
.vision-zone-line { fill: none; stroke: #267fab; stroke-width: 2; stroke-dasharray: 6 5; }
.vision-zone-text { font: 600 22px Inter, Arial, sans-serif; fill: #163b56; text-anchor: middle; }
.vision-guide-detail { margin-top: 8px; padding: 16px; border-radius: 6px; background: #edf5fa; color: #254e6a; font-size: 14px; line-height: 1.65; min-height: 100px; }
.vision-guide[data-distance="far"] .vision-zone:not([data-zone="far"]),
.vision-guide[data-distance="mid"] .vision-zone:not([data-zone="mid"]),
.vision-guide[data-distance="near"] .vision-zone:not([data-zone="near"]) { opacity: .18; }
.vision-guide:not([data-distance="all"]) .vision-zone-text { opacity: .6; }
.vision-guide[data-distance="far"] .vision-guide-card--progressive .vision-zone-text:nth-of-type(1),
.vision-guide[data-distance="mid"] .vision-guide-card--progressive .vision-zone-text:nth-of-type(2),
.vision-guide[data-distance="mid"] .vision-guide-card--occupational .vision-zone-text:nth-of-type(1),
.vision-guide[data-distance="near"] .vision-guide-card--progressive .vision-zone-text:nth-of-type(3),
.vision-guide[data-distance="near"] .vision-guide-card--occupational .vision-zone-text:nth-of-type(2) { opacity: 1; }
.vision-guide-note { max-width: 750px; margin: 22px auto 0; font-size: 12px; color: #526779; text-align: center; }
.vision-guide-source { font-size: 12px; color: #526779; margin-top: 16px; text-align: center; }
.vision-guide-source summary { cursor: pointer; padding: 8px; }
.vision-guide-source a { text-decoration: underline; }
@media (max-width: 760px) {
  .lens-lab[data-scene="comparison"] .vision-guide { padding: 22px 14px; }
  .vision-guide-intro h3 { font-size: 26px; }
  .vision-guide-intro p { font-size: 14px; }
  .vision-distance { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .vision-distance button { padding: 10px; }
  .vision-guide-pair { grid-template-columns: 1fr; gap: 16px; }
  .vision-guide-card { padding: 18px 14px; }
  .vision-guide-card h4 { font-size: 24px; }
  .vision-guide-detail { min-height: 0; }
}