.vision-training{--vision-border:#d9e2de;--vision-ink:#173b32;color:var(--text,#20332d)}
.vision-training h3{font-size:18px;margin:0 0 8px}
.vision-training p{line-height:1.7}
.vision-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:28px 0 22px}
.vision-intro p{margin:0;color:var(--muted,#53675e);font-size:14px}
.vision-time{min-width:90px;text-align:right;display:grid;gap:4px}
.vision-time>span{font-size:12px;color:var(--muted,#53675e)}
.vision-time strong{font:500 26px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-1px;color:var(--vision-ink)}
.vision-stage{display:flex;align-items:start;gap:12px;padding:24px 16px;background:#f5f7f4;border:1px solid var(--vision-border);border-radius:12px}
.vision-anchor{width:48px;flex-shrink:0;text-align:center}
.vision-anchor>span{display:block;height:108px;border-radius:5px;border:1px solid #00000012}
.vision-anchor small{display:block;margin-top:9px;font-size:11px;color:#4c6058;white-space:nowrap}
.vision-swatches{flex:1;min-width:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.vision-chip{display:block;min-width:0;border:2px solid transparent;border-radius:7px;background:transparent;padding:2px;cursor:pointer;color:#344f43;transition:border-color .15s ease,background-color .15s ease}
.vision-chip-color{display:block;background:var(--swatch);height:100px;width:100%;border-radius:4px;border:1px solid #00000010}
.vision-chip-caption{display:block;font-size:11px;margin-top:8px;white-space:nowrap;line-height:18px}
.vision-chip:hover:not(:disabled){border-color:#809c8b;background:#e6eee7}
.vision-chip.selected{border-color:#175b40;background:#d9eadf}
.vision-chip:focus-visible{outline:3px solid #175b40;outline-offset:2px}
.vision-chip:disabled{cursor:default;opacity:1}
.vision-instruction{font-size:13px;color:#52675b;margin:16px 0 4px}
.vision-feedback{font-size:13px;min-height:23px;color:#175b40;margin:4px 0 16px}
.vision-controls{display:flex;flex-wrap:wrap;gap:10px}
.vision-result{margin-top:22px;background:#edf5ef;border:1px solid #cbded1;border-radius:10px;padding:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vision-result[hidden]{display:none}
.vision-result>div{display:grid;gap:8px}
.vision-result>div>span{font-size:12px;color:#486152}
.vision-result strong{font-size:28px;line-height:1.2;color:#173b32}
.vision-result strong small{font-size:15px;font-weight:500}
.vision-result p{grid-column:1/-1;font-size:12px;color:#486152;margin:0}
.vision-details{border-top:1px solid var(--vision-border);margin-top:26px;padding-top:24px}
.vision-details>p{margin:0 0 18px;font-size:13px;color:#52675b}
.vision-consent{display:flex;align-items:start;gap:10px;margin-top:18px;font-size:12px;line-height:1.8;color:#425c4c}
.vision-consent input{margin-top:5px;flex-shrink:0;accent-color:#286b4d;width:16px;height:16px}
@media(max-width:640px){.vision-stage{padding:14px 8px;gap:7px}.vision-anchor{width:30px}.vision-anchor>span{height:88px}.vision-anchor small{font-size:10px;white-space:normal;line-height:1.5}.vision-swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.vision-chip-color{height:68px}.vision-chip-caption{font-size:10px;margin-top:3px}.vision-intro{gap:14px;margin-top:22px}.vision-intro h3{font-size:16px}.vision-intro p{font-size:12px}.vision-time{min-width:65px}.vision-time strong{font-size:22px}.vision-result{padding:16px;gap:10px}.vision-result strong{font-size:22px}.vision-result strong small{font-size:12px}.vision-controls .btn{min-height:44px}.vision-consent{font-size:12px}}
@media(prefers-reduced-motion:reduce){.vision-chip{transition:none}}