:root{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #3a3a3a;--text-primary: #ffffff;--text-secondary: #cccccc;--text-muted: #888888;--accent-good: #22c55e;--accent-warning: #eab308;--accent-danger: #ef4444;--accent-blue: #3b82f6;--border-radius: 16px;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh}.container{max-width:1000px;margin:0 auto;padding:20px}header{text-align:center;margin-bottom:30px}header h1{font-size:2.5rem;font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,var(--accent-blue),var(--accent-good));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}header p{color:var(--text-secondary);font-size:1.1rem}.video-container{position:relative;width:100%;max-width:640px;margin:0 auto 30px;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow);background-color:var(--bg-secondary)}#webcam{width:100%;height:auto;display:block;transform:scaleX(-1)}#canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:scaleX(-1)}.controls{display:flex;justify-content:center;align-items:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}button{background-color:var(--accent-blue);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}button:hover:not(:disabled){background-color:#2563eb;transform:translateY(-1px)}button:disabled{background-color:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed;transform:none}.calibration-control{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:500}.calibration-control input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-blue)}.status-banner{padding:16px;border-radius:12px;text-align:center;font-size:1.2rem;font-weight:600;margin-bottom:30px;transition:all .3s ease}.status-banner.good{background-color:#22c55e26;color:var(--accent-good);border:1px solid rgba(34,197,94,.3)}.status-banner.warning{background-color:#eab30826;color:var(--accent-warning);border:1px solid rgba(234,179,8,.3)}.status-banner.danger{background-color:#ef444426;color:var(--accent-danger);border:1px solid rgba(239,68,68,.3)}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.metric{background-color:var(--bg-secondary);padding:24px;border-radius:var(--border-radius);box-shadow:var(--shadow);text-align:center}.metric h3{color:var(--text-secondary);font-size:1rem;font-weight:500;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.metric-value{display:flex;flex-direction:column;align-items:center;gap:4px}.metric-value>span{font-size:2rem;font-weight:700;color:var(--text-primary)}.metric-value small{color:var(--text-muted);font-size:.875rem}.info{background-color:var(--bg-secondary);padding:20px;border-radius:12px;border-left:4px solid var(--accent-blue)}.info p{margin-bottom:8px;color:var(--text-secondary)}.info p:last-child{margin-bottom:0}@media (max-width: 768px){.container{padding:15px}header h1{font-size:2rem}.controls{flex-direction:column;gap:15px}.metrics{grid-template-columns:1fr;gap:15px}.metric{padding:20px}.metric-value>span{font-size:1.75rem}}.loading{display:inline-block;width:20px;height:20px;border:3px solid var(--bg-tertiary);border-radius:50%;border-top-color:var(--accent-blue);animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}