:root{--vat-primary:#6366f1;--vat-primary-light:#6366f114;--vat-primary-shadow:#6366f126;--vat-success:#10b981;--vat-success-light:#10b98114;--vat-error:#ef4444;--vat-error-light:#ef444414;--vat-warning:#f59e0b;--vat-warning-light:#f59e0b14;--vat-bg:#fff;--vat-bg-secondary:#f8fafc;--vat-bg-tertiary:#f1f5f9;--vat-text:#0f172a;--vat-text-secondary:#475569;--vat-text-muted:#64748b;--vat-border:#e2e8f0;--vat-border-light:#f1f5f9;--vat-shadow-sm:0 1px 2px #0000000a;--vat-shadow:0 1px 3px #0000000f, 0 1px 2px #0000000a;--vat-shadow-md:0 4px 6px -1px #00000012, 0 2px 4px -1px #0000000a;--vat-shadow-lg:0 10px 15px -3px #00000014, 0 4px 6px -2px #0000000a;--vat-radius:.75rem;--vat-radius-lg:1rem;--vat-radius-sm:.5rem;--vat-radius-full:9999px;--vat-chart-text:#0f172a;--vat-on-primary:#fff}._vat-container{max-width:640px;min-height:400px;margin:0 auto}._vat-setup,._vat-test,._vat-result{display:none}._vat-setup._vat-screen--active,._vat-test._vat-screen--active,._vat-result._vat-screen--active{display:block}@media (max-width:768px){._vat-container{padding-left:1rem;padding-right:1rem}}._vat-setup-card{background:var(--vat-bg);border-radius:var(--vat-radius-lg);border-style:solid;border-width:1px;border-color:var(--vat-border);box-shadow:var(--vat-shadow);padding:var(--main-space-8);text-align:center}._vat-setup-icon{border-radius:var(--vat-radius-full);background:var(--vat-primary-light);width:64px;height:64px;color:var(--vat-primary);margin-bottom:var(--main-space-4);justify-content:center;align-items:center;display:inline-flex}._vat-setup-icon svg{width:32px;height:32px}._vat-setup-title{font-size:var(--main-text-xl);color:var(--vat-text);margin:0 0 var(--main-space-2) 0;font-weight:700}._vat-setup-desc{font-size:var(--main-text-sm);color:var(--vat-text-muted);margin:0 0 var(--main-space-6) 0;line-height:1.6}._vat-setup-section{margin-bottom:var(--main-space-5)}._vat-setup-label{font-size:var(--main-text-sm);color:var(--vat-text-secondary);margin-bottom:var(--main-space-2);text-align:left;font-weight:600;display:block}._vat-eye-select{gap:var(--main-space-2);display:flex}._vat-eye-btn{align-items:center;gap:var(--main-space-1);padding:var(--main-space-3) var(--main-space-2);border-style:solid;border-width:2px;border-color:var(--vat-border);border-radius:var(--vat-radius);background:var(--vat-bg);min-height:44px;color:var(--vat-text-secondary);font-size:var(--main-text-sm);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;flex-direction:column;flex:1;font-weight:500;transition:border-color .15s,color .15s,background .15s;display:flex}@media (hover:hover){._vat-eye-btn:hover{border-color:var(--vat-primary);color:var(--vat-primary)}}._vat-eye-btn--active{border-color:var(--vat-primary);background:var(--vat-primary-light);color:var(--vat-primary)}._vat-distance-select{gap:var(--main-space-2);display:flex}._vat-distance-btn{padding:var(--main-space-3) var(--main-space-2);border-style:solid;border-width:2px;border-color:var(--vat-border);border-radius:var(--vat-radius);background:var(--vat-bg);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;flex-direction:column;flex:1;align-items:center;gap:2px;min-height:48px;transition:border-color .15s,color .15s,background .15s;display:flex}@media (hover:hover){._vat-distance-btn:hover{border-color:var(--vat-primary)}}._vat-distance-btn--active{border-color:var(--vat-primary);background:var(--vat-primary-light)}._vat-distance-value{font-size:var(--main-text-base);color:var(--vat-text);font-weight:700}._vat-distance-btn--active ._vat-distance-value{color:var(--vat-primary)}._vat-distance-label{font-size:var(--main-text-xs);color:var(--vat-text-muted)}._vat-calibrate{text-align:left}._vat-calibrate-desc{font-size:var(--main-text-xs);color:var(--vat-text-muted);margin:0 0 var(--main-space-3) 0;line-height:1.5}._vat-calibrate-card-wrap{margin-bottom:var(--main-space-3);padding:var(--main-space-3) 0;justify-content:center;display:flex}._vat-calibrate-card{border-style:dashed;border-width:2px;border-color:var(--vat-primary);border-radius:var(--vat-radius-sm);background:var(--vat-primary-light);flex-direction:column;justify-content:center;align-items:center;gap:2px;width:323px;max-width:100%;height:60px;display:flex}._vat-calibrate-card-label{font-size:var(--main-text-xs);color:var(--vat-primary);font-weight:600}._vat-calibrate-card-size{color:var(--vat-text-muted);font-size:10px}._vat-calibrate-slider{-webkit-appearance:none;appearance:none;background:var(--vat-bg-tertiary);border-radius:var(--vat-radius-full);cursor:pointer;touch-action:pan-x;outline:none;width:100%;height:6px}._vat-calibrate-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--vat-primary);cursor:pointer;width:24px;height:24px;box-shadow:0 1px 4px var(--vat-primary-shadow);border-radius:50%}._vat-calibrate-slider::-moz-range-thumb{background:var(--vat-primary);cursor:pointer;width:24px;height:24px;box-shadow:0 1px 4px var(--vat-primary-shadow);border:none;border-radius:50%}._vat-calibrate-info{margin-top:var(--main-space-2);justify-content:center;display:flex}._vat-calibrate-ppi{font-size:var(--main-text-xs);color:var(--vat-text-muted);font-family:var(--main-font-mono)}._vat-disclaimer{align-items:flex-start;gap:var(--main-space-2);padding:var(--main-space-3);border-radius:var(--vat-radius-sm);background:var(--vat-warning-light);color:var(--vat-text-secondary);font-size:var(--main-text-xs);text-align:left;margin-bottom:var(--main-space-5);line-height:1.5;display:flex}._vat-disclaimer svg{color:var(--vat-warning);flex-shrink:0;margin-top:1px}._vat-btn-start{justify-content:center;align-items:center;gap:var(--main-space-2);width:100%;padding:var(--main-space-3) var(--main-space-6);border-radius:var(--vat-radius);background:var(--vat-primary);min-height:48px;color:var(--vat-on-primary);font-size:var(--main-text-base);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;box-shadow:0 2px 8px var(--vat-primary-shadow);border:none;font-weight:600;display:inline-flex}@media (hover:hover){._vat-btn-start:hover{opacity:.9}}@media (max-width:480px){._vat-setup-card{padding:var(--main-space-5) var(--main-space-4)}._vat-eye-select{flex-direction:column}._vat-eye-btn{flex-direction:row;justify-content:center}._vat-calibrate-card-wrap{overflow:hidden}}._vat-test-header{margin-bottom:var(--main-space-3)}._vat-test-info{justify-content:center;align-items:center;gap:var(--main-space-2);font-size:var(--main-text-xs);color:var(--vat-text-muted);margin-bottom:var(--main-space-2);display:flex}._vat-test-eye{color:var(--vat-text-secondary);font-weight:600}._vat-test-separator{color:var(--vat-text-muted);opacity:.5}._vat-test-line{font-weight:500}._vat-test-progress{border-radius:var(--vat-radius-full);background:#00000014;height:3px;overflow:hidden}._vat-test-progress-bar{border-radius:var(--vat-radius-full);background:var(--vat-primary);opacity:.6;width:0%;height:100%;transition:width .3s}._vat-cover-hint{justify-content:center;align-items:center;gap:var(--main-space-2);padding:var(--main-space-1) var(--main-space-3);color:var(--vat-text-muted);font-size:var(--main-text-xs);margin-bottom:var(--main-space-4);font-weight:500;display:flex}._vat-chart{min-height:160px;padding:var(--main-space-6) var(--main-space-4);margin-bottom:var(--main-space-5);background:var(--vat-bg);border-style:solid;border-width:1px;border-color:var(--vat-border);border-radius:var(--vat-radius-lg);box-shadow:var(--vat-shadow);flex-direction:column;justify-content:center;align-items:center;display:flex}._vat-chart-letters{color:var(--vat-chart-text);letter-spacing:.15em;-webkit-user-select:none;user-select:none;margin-bottom:var(--main-space-3);flex-wrap:wrap;justify-content:center;align-items:center;gap:.3em;max-width:100%;font-family:Courier New,monospace;font-weight:700;line-height:1;display:flex}._vat-chart-acuity{font-size:var(--main-text-xs);color:var(--vat-text-muted);font-weight:500}._vat-input-area{--vat-zoom:1;border-radius:var(--vat-radius-lg);padding:var(--main-space-4) 0;background:0 0}._vat-zoom-bar{margin-bottom:var(--main-space-3);justify-content:space-between;align-items:center;display:flex}._vat-zoom-label{font-size:var(--main-text-xs);color:var(--vat-text-muted);font-weight:500}._vat-zoom-controls{border-radius:var(--vat-radius-sm);border:1.5px solid #0000001f;align-items:center;gap:0;display:flex;overflow:hidden}._vat-zoom-btn{width:36px;height:32px;color:var(--vat-text-secondary);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#ffffffb3;border:none;justify-content:center;align-items:center;display:flex}@media (hover:hover){._vat-zoom-btn:hover{background:#ffffffe6}._vat-zoom-btn:disabled:hover{background:#ffffffb3}}._vat-zoom-btn:disabled{opacity:.3;cursor:not-allowed}._vat-zoom-value{min-width:44px;height:32px;font-size:var(--main-text-xs);color:var(--vat-text-secondary);background:#fff6;border-left:1px solid #00000014;border-right:1px solid #00000014;justify-content:center;align-items:center;font-weight:600;display:flex}._vat-input-display{justify-content:center;align-items:center;gap:calc(var(--main-space-2) * var(--vat-zoom));min-height:calc(48px * var(--vat-zoom));padding:calc(var(--main-space-2) * var(--vat-zoom)) var(--main-space-3);margin-bottom:var(--main-space-3);border-radius:var(--vat-radius-sm);font-size:calc(1.25rem * var(--vat-zoom));font-weight:700;font-family:var(--main-font-mono);color:var(--vat-text);letter-spacing:.2em;background:#fff9;border:1px dashed #0000001a;display:flex}._vat-input-char{min-width:calc(1.5em * var(--vat-zoom));justify-content:center;align-items:center;display:inline-flex}._vat-input-char--empty{color:var(--vat-text-muted);opacity:.4}._vat-letter-buttons{gap:var(--main-space-1);margin-bottom:var(--main-space-3);grid-template-columns:repeat(9,1fr);display:grid}._vat-letter-btn{padding:calc(var(--main-space-2) * var(--vat-zoom)) 0;min-height:calc(40px * var(--vat-zoom));border-radius:var(--vat-radius-sm);color:var(--vat-text);font-size:calc(1rem * var(--vat-zoom));font-weight:700;font-family:var(--main-font-mono);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#ffffffb3;border:1.5px solid #0000001f;justify-content:center;align-items:center;transition:background .1s,border-color .1s;display:flex}@media (hover:hover){._vat-letter-btn:hover{background:var(--vat-primary-light);border-color:var(--vat-primary);color:var(--vat-primary)}}._vat-letter-btn:active{background:var(--vat-primary);color:var(--vat-on-primary)}._vat-input-actions{align-items:center;gap:var(--main-space-2);display:flex}._vat-action-btn{justify-content:center;align-items:center;gap:var(--main-space-1);padding:calc(var(--main-space-2) * var(--vat-zoom)) calc(var(--main-space-3) * var(--vat-zoom));min-height:calc(40px * var(--vat-zoom));border-radius:var(--vat-radius-sm);color:var(--vat-text-secondary);font-size:calc(.875rem * var(--vat-zoom));cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#ffffffb3;border:1.5px solid #0000001f;font-weight:500;transition:background .1s,border-color .1s;display:inline-flex}@media (hover:hover){._vat-action-btn:hover{border-color:var(--vat-text-muted);background:#ffffffe6}._vat-action-btn--skip:hover{color:var(--vat-error);border-color:var(--vat-error);background:var(--vat-error-light)}}._vat-action-btn--skip{color:var(--vat-text-muted);margin-left:auto}._vat-line-feedback{z-index:100;align-items:center;gap:var(--main-space-2);padding:var(--main-space-6) var(--main-space-8);border-radius:var(--vat-radius-lg);background:var(--vat-bg);box-shadow:var(--vat-shadow-lg), 0 0 0 1px var(--vat-border);text-align:center;flex-direction:column;max-width:calc(100vw - 2rem);animation:.2s _vat-fade-in;display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}._vat-line-feedback._vat-line-feedback--visible{display:flex}._vat-feedback-icon{font-size:2rem}._vat-feedback-text{font-size:var(--main-text-base);color:var(--vat-text);font-weight:600}._vat-feedback-detail{font-size:var(--main-text-sm);color:var(--vat-text-muted)}._vat-line-feedback--pass ._vat-feedback-text{color:var(--vat-success)}._vat-line-feedback--fail ._vat-feedback-text{color:var(--vat-error)}._vat-keyboard-hint{justify-content:center;align-items:center;gap:var(--main-space-2);margin-top:var(--main-space-3);font-size:var(--main-text-xs);color:var(--vat-text-muted);opacity:.7;line-height:1.5;display:flex}._vat-keyboard-hint svg{flex-shrink:0}@keyframes _vat-fade-in{0%{opacity:0}to{opacity:1}}@media (max-width:480px){._vat-letter-buttons{gap:var(--main-space-2);grid-template-columns:repeat(5,1fr)}._vat-chart{padding:var(--main-space-4) var(--main-space-2);min-height:120px}._vat-input-actions{gap:var(--main-space-2);flex-wrap:wrap}._vat-action-btn{flex:1}._vat-action-btn--skip{margin-left:0}._vat-cover-hint{font-size:var(--main-text-xs)}._vat-line-feedback{padding:var(--main-space-5) var(--main-space-6)}._vat-input-display{letter-spacing:.15em}}@media (max-width:360px){._vat-letter-buttons{gap:var(--main-space-1);grid-template-columns:repeat(5,1fr)}}._vat-result-card{background:var(--vat-bg);border-radius:var(--vat-radius-lg);border-style:solid;border-width:1px;border-color:var(--vat-border);box-shadow:var(--vat-shadow);padding:var(--main-space-10) var(--main-space-8);text-align:center}._vat-result-icon{margin-bottom:var(--main-space-4)}._vat-result-icon svg{width:48px;height:48px}._vat-result-score-label{font-size:var(--main-text-base);color:var(--vat-text-muted);margin-bottom:var(--main-space-2);text-transform:uppercase;letter-spacing:.08em;font-weight:500}._vat-result-score{color:var(--vat-text);margin-bottom:var(--main-space-4);font-size:5rem;font-weight:800;line-height:1;font-family:var(--main-font-mono)}._vat-result-rating{padding:var(--main-space-2) var(--main-space-5);border-radius:var(--vat-radius-full);font-size:var(--main-text-lg);margin-bottom:var(--main-space-4);font-weight:600;display:inline-flex}._vat-result-rating--excellent{background:var(--vat-success-light);color:#059669}._vat-result-rating--good{color:#10b981;background:#10b9810f}._vat-result-rating--normal{background:var(--vat-primary-light);color:var(--vat-primary)}._vat-result-rating--below{background:var(--vat-warning-light);color:#d97706}._vat-result-rating--poor{background:var(--vat-error-light);color:#dc2626}._vat-result-desc{font-size:var(--main-text-base);color:var(--vat-text-secondary);margin-bottom:var(--main-space-8);max-width:480px;margin-left:auto;margin-right:auto;line-height:1.7}._vat-result-lines{text-align:left;margin-bottom:var(--main-space-6);border-style:solid;border-width:1px;border-color:var(--vat-border);border-radius:var(--vat-radius);overflow:hidden}._vat-result-line{align-items:center;gap:var(--main-space-3);padding:var(--main-space-3) var(--main-space-4);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--vat-border-light);font-size:var(--main-text-base);display:flex}._vat-result-line:last-child{border-bottom:none}._vat-result-line-acuity{color:var(--vat-text);min-width:70px;font-weight:600;font-family:var(--main-font-mono);font-size:var(--main-text-sm)}._vat-result-line-letters{font-family:var(--main-font-mono);color:var(--vat-text-secondary);letter-spacing:.15em;font-size:var(--main-text-base);flex:1}._vat-result-line-status{align-items:center;gap:var(--main-space-1);font-size:var(--main-text-sm);font-weight:600;display:flex}._vat-result-line--pass ._vat-result-line-status{color:var(--vat-success)}._vat-result-line--fail ._vat-result-line-status{color:var(--vat-error)}._vat-result-line--skip ._vat-result-line-status{color:var(--vat-text-muted)}._vat-disclaimer--result{margin-bottom:var(--main-space-6)}._vat-result-actions{justify-content:center;display:flex}._vat-btn-retry{justify-content:center;align-items:center;gap:var(--main-space-2);padding:var(--main-space-4) var(--main-space-8);border-radius:var(--vat-radius);background:var(--vat-primary);min-height:48px;color:var(--vat-on-primary);font-size:var(--main-text-lg);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;box-shadow:0 2px 8px var(--vat-primary-shadow);border:none;font-weight:600;display:inline-flex}@media (hover:hover){._vat-btn-retry:hover{opacity:.9}}@media (max-width:480px){._vat-result-card{padding:var(--main-space-6) var(--main-space-4)}._vat-result-score{font-size:3.5rem}._vat-result-rating{font-size:var(--main-text-base)}._vat-result-line{gap:var(--main-space-2);padding:var(--main-space-2) var(--main-space-3);font-size:var(--main-text-sm)}._vat-result-line-acuity{min-width:56px}._vat-result-line-letters{font-size:var(--main-text-sm);word-break:break-all}._vat-btn-retry{font-size:var(--main-text-base);padding:var(--main-space-3) var(--main-space-6);width:100%}._vat-result-actions{align-items:stretch}}@media (max-width:360px){._vat-result-score{font-size:2.75rem}._vat-result-card{padding:var(--main-space-5) var(--main-space-3)}}