:root{--text: #6b6375;--text-h: #08060d;--bg: #fff;--border: #e5e4e7;--code-bg: #f4f3ec;--accent: #aa3bff;--accent-bg: rgba(170, 59, 255, .1);--accent-border: rgba(170, 59, 255, .5);--social-bg: rgba(244, 243, 236, .5);--shadow: rgba(0, 0, 0, .1) 0 10px 15px -3px, rgba(0, 0, 0, .05) 0 4px 6px -2px;--sans: system-ui, "Segoe UI", Roboto, sans-serif;--heading: system-ui, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(max-width:1024px){:root{font-size:16px}}@media(prefers-color-scheme:dark){:root{--text: #9ca3af;--text-h: #f3f4f6;--bg: #16171d;--border: #2e303a;--code-bg: #1f2028;--accent: #c084fc;--accent-bg: rgba(192, 132, 252, .15);--accent-border: rgba(192, 132, 252, .5);--social-bg: rgba(47, 48, 58, .5);--shadow: rgba(0, 0, 0, .4) 0 10px 15px -3px, rgba(0, 0, 0, .25) 0 4px 6px -2px}#social .button-icon{filter:invert(1) brightness(2)}}body{margin:0}#root{width:1126px;max-width:100%;margin:0 auto;text-align:center;border-inline:1px solid var(--border);min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box}h1,h2{font-family:var(--heading);font-weight:500;color:var(--text-h)}h1{font-size:56px;letter-spacing:-1.68px;margin:32px 0}@media(max-width:1024px){h1{font-size:36px;margin:20px 0}}h2{font-size:24px;line-height:118%;letter-spacing:-.24px;margin:0 0 8px}@media(max-width:1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);display:inline-flex;border-radius:4px;color:var(--text-h)}code{font-size:15px;line-height:135%;padding:4px 8px;background:var(--code-bg)}.eye-tracking-control{position:fixed;right:20px;bottom:20px;width:54px;height:54px;padding:0;border-radius:50%;border:3px solid #9e9e9e;background:#fff;color:#242424;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9000;box-sizing:border-box;box-shadow:0 3px 12px #00000024;transition:transform .15s ease,box-shadow .15s ease,border-color .2s ease}.eye-tracking-control:hover{transform:translateY(-1px);box-shadow:0 5px 16px #0000002e}.eye-tracking-control:focus-visible{outline:3px solid rgba(25,118,210,.35);outline-offset:3px}.eye-tracking-control:disabled{cursor:wait;opacity:.8}.eye-tracking-control svg{width:26px;height:26px;display:block}.eye-tracking-control.status-off{border-color:#9e9e9e}.eye-tracking-control.status-initializing{border-color:#1976d2}.eye-tracking-control.status-tracking{border-color:#2e7d32}.eye-tracking-control.status-lost,.eye-tracking-control.status-error{border-color:#c62828}.calibration-overlay{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow:hidden;background:#f8f9fafa;z-index:10000;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-sizing:border-box}.incluc0de-calibration-camera{position:fixed!important;left:50%!important;top:37%!important;transform:translate(-50%,-50%)!important;z-index:10020!important;display:block!important;opacity:1!important}.calibration-point{position:absolute;width:30px;height:30px;min-width:30px;min-height:30px;padding:0;transform:translate(-50%,-50%);border-radius:50%;border:3px solid #9fa4a7;background:#fff;color:#424242;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:10030;box-sizing:border-box;transition:width .15s ease,height .15s ease,border-color .15s ease,background-color .15s ease,opacity .15s ease}.calibration-point-pending{opacity:.34;cursor:default}.calibration-point-active{width:46px;height:46px;min-width:46px;min-height:46px;border:4px solid #2e7d32;background:#e8f5e9;color:#1b5e20;cursor:pointer;z-index:10060;animation:calibrationPointPulse 1.5s ease-in-out infinite}.calibration-point-completed{border-color:#2e7d32;background:#fff;color:#2e7d32;opacity:.75;cursor:default}.calibration-instructions{position:fixed;left:50%;top:61%;transform:translate(-50%);width:min(520px,70vw);padding:18px 24px;border:1px solid rgba(0,0,0,.14);border-radius:14px;background:#fff;color:#2d2d2d;text-align:center;z-index:10040;box-sizing:border-box;box-shadow:0 5px 20px #0000001f}.calibration-instructions h2{margin:0 0 10px;font-size:20px;line-height:1.3;font-weight:600}.calibration-instructions p{margin:8px 0;font-size:15px;line-height:1.45}.calibration-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:14px}.calibration-start-button,.calibration-cancel-button{min-height:40px;padding:9px 18px;border-radius:8px;font-size:14px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.calibration-start-button{border:1px solid #242424;background:#242424;color:#fff}.calibration-start-button:hover{background:#111}.calibration-cancel-button{border:1px solid #d3d7da;background:#fff;color:#424242}.calibration-cancel-button:hover{background:#f5f5f5}.calibration-start-button:focus-visible,.calibration-cancel-button:focus-visible,.calibration-point:focus-visible{outline:3px solid rgba(25,118,210,.35);outline-offset:3px}.calibration-completed{text-align:center}.calibration-completed-icon{width:42px;height:42px;margin:0 auto 8px;border-radius:50%;background:#e8f5e9;color:#2e7d32;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}@keyframes calibrationPointPulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.18)}}@media(max-width:900px){.calibration-instructions{width:min(500px,76vw)}}@media(max-width:600px){.eye-tracking-control{right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));width:56px;height:56px}.eye-tracking-control svg{width:27px;height:27px}.incluc0de-calibration-camera{left:50%!important;top:27%!important;transform:translate(-50%,-50%) scale(.68)!important;transform-origin:center center!important}.calibration-instructions{left:16px;right:16px;top:52%;transform:none;width:auto;max-height:calc(43dvh - env(safe-area-inset-bottom,0px));overflow-y:auto;padding:14px 16px;border-radius:12px;-webkit-overflow-scrolling:touch}.calibration-instructions h2{margin-bottom:8px;font-size:18px;line-height:1.25}.calibration-instructions p{margin:6px 0;font-size:14px;line-height:1.35}.calibration-actions{gap:8px;margin-top:10px}.calibration-start-button,.calibration-cancel-button{min-height:44px;padding:9px 16px;font-size:14px}.calibration-point{width:28px;height:28px;min-width:28px;min-height:28px;touch-action:manipulation}.calibration-point-active{width:46px;height:46px;min-width:46px;min-height:46px;z-index:10060}}@media(max-width:600px)and (max-height:750px){.incluc0de-calibration-camera{top:24%!important;transform:translate(-50%,-50%) scale(.58)!important}.calibration-instructions{top:46%;max-height:calc(48dvh - env(safe-area-inset-bottom,0px));padding:12px 14px}.calibration-instructions h2{font-size:17px}.calibration-instructions p{font-size:13px;line-height:1.3;margin:5px 0}.calibration-actions{margin-top:8px}}@media(max-width:380px){.calibration-instructions{left:12px;right:12px;padding:12px}.calibration-instructions h2{font-size:17px}.calibration-instructions p{font-size:13px}.calibration-actions{width:100%}.calibration-start-button,.calibration-cancel-button{flex:1 1 120px;min-width:0}}@media(prefers-reduced-motion:reduce){.calibration-point-active{animation:none}.eye-tracking-control,.calibration-point,.calibration-start-button,.calibration-cancel-button{transition:none}}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#1f2937;background:#f5f7fa}button,input{font:inherit}.simulation-setup{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}.simulation-card{width:100%;max-width:520px;padding:32px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 14px 40px #0f172a14}.simulation-card-header{margin-bottom:28px}.simulation-eyebrow{display:inline-block;margin-bottom:8px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2563eb}.simulation-card h1{margin:0 0 10px;font-size:1.75rem;line-height:1.2;color:#111827}.simulation-card-header p{margin:0;line-height:1.6;color:#6b7280}.simulation-form{display:flex;flex-direction:column;gap:22px}.simulation-field{display:flex;flex-direction:column;gap:7px}.simulation-field>span{font-size:.9rem;font-weight:650;color:#374151}.simulation-field input{width:100%;padding:12px 14px;border:1px solid #d1d5db;border-radius:10px;background:#fff;color:#111827;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.simulation-field input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.simulation-field input::placeholder{color:#9ca3af}.simulation-field small{line-height:1.4;color:#6b7280}.simulation-start-button{width:100%;margin-top:4px;padding:12px 18px;border:0;border-radius:10px;background:#2563eb;color:#fff;font-weight:650;cursor:pointer;transition:transform .12s ease,opacity .12s ease}.simulation-start-button:hover{opacity:.92}.simulation-start-button:active{transform:scale(.99)}.app-content{width:min(1200px,calc(100% - 40px));margin:0 auto;padding:48px 0 100px}.demo-content{margin-bottom:32px}.demo-content h1{margin:0 0 12px;font-size:2rem;color:#111827}.demo-content>p{max-width:760px;margin:0 0 10px;line-height:1.65;color:#4b5563}.demo-area{min-height:260px;margin-top:28px;padding:28px;border:1px solid #e5e7eb;border-radius:16px;background:#fff;box-shadow:0 8px 24px #0f172a0d}.demo-area h2{margin:0 0 12px;font-size:1.2rem;color:#111827}.demo-area p{max-width:800px;line-height:1.65;color:#4b5563}.event-monitor{overflow:hidden;margin-top:32px;border:1px solid #dfe3e8;border-radius:16px;background:#fff;box-shadow:0 8px 24px #0f172a0f}.event-monitor-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px;border-bottom:1px solid #e5e7eb}.event-monitor-header h2{margin:0 0 5px;font-size:1.2rem;color:#111827}.event-monitor-header p{margin:0;font-size:.9rem;color:#6b7280}.event-monitor-actions{display:flex;flex-wrap:wrap;gap:8px}.event-monitor-actions button{padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#374151;cursor:pointer}.event-monitor-actions button:hover{background:#f9fafb}.event-monitor-actions .end-session-button{border-color:#fecaca;color:#b91c1c;background:snow}.session-data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;background:#e5e7eb;border-bottom:1px solid #e5e7eb}.session-data>div{min-width:0;padding:16px 20px;background:#f9fafb}.session-data dt{margin-bottom:5px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b7280}.session-data dd{overflow-wrap:anywhere;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.86rem;color:#1f2937}.current-gaze-card{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid #e5e7eb;background:#fff}.current-gaze-card>span{font-size:.85rem;font-weight:600;color:#4b5563}.current-gaze{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;font-size:.8rem;font-weight:750}.current-gaze-inside{color:#991b1b;background:#fee2e2}.current-gaze-outside{color:#166534;background:#dcfce7}.current-gaze-lost{color:#4b5563;background:#e5e7eb}.current-gaze-unknown{color:#6b7280;background:#f3f4f6}.current-gaze-dot{width:8px;height:8px;flex-shrink:0;border-radius:50%;background:currentColor}.current-gaze-card small{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:#6b7280}.event-list-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;background:#f9fafb;border-bottom:1px solid #e5e7eb}.event-list-header strong{color:#374151}.event-list-header span{font-size:.82rem;color:#6b7280}.event-list{max-height:520px;overflow-y:auto}.event-empty{padding:40px 24px;text-align:center;line-height:1.6;color:#6b7280}.event-row{display:grid;grid-template-columns:120px minmax(220px,1fr) auto;align-items:start;gap:16px;padding:14px 20px;border-bottom:1px solid #f0f1f3;border-left:4px solid transparent}.event-row:last-child{border-bottom:0}.event-row time{padding-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.78rem;color:#6b7280}.event-description{display:flex;flex-direction:column;gap:3px}.event-description strong{font-size:.86rem;color:#1f2937}.event-description span{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.76rem;color:#6b7280}.event-inside{border-left-color:#dc2626;background:snow}.event-outside{border-left-color:#16a34a;background:#f8fff9}.event-lost{border-left-color:#6b7280;background:#fafafa}.event-browser{border-left-color:#2563eb;background:#f8fbff}.event-row details{min-width:70px}.event-row summary{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:.78rem;font-weight:650;color:#2563eb}.event-row details[open]{grid-column:1 / -1;width:100%}.event-row pre{overflow-x:auto;margin:12px 0 0;padding:16px;border-radius:10px;background:#111827;color:#e5e7eb;font-size:.75rem;line-height:1.55}@media(max-width:760px){.simulation-setup{align-items:flex-start;padding:20px 14px}.simulation-card{margin-top:20px;padding:24px 20px;border-radius:14px}.app-content{width:calc(100% - 24px);padding:28px 0 90px}.event-monitor-header{flex-direction:column}.event-monitor-actions{width:100%}.event-monitor-actions button{flex:1}.session-data{grid-template-columns:1fr}.current-gaze-card{align-items:flex-start;flex-wrap:wrap}.current-gaze-card small{width:100%;margin-left:0}.event-row{grid-template-columns:1fr;gap:5px;padding:14px 16px}.event-row details[open]{grid-column:auto}.event-list-header{padding:12px 16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}