:root{--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-primary-light: #eff6ff;--color-success: #22c55e;--color-success-dark: #16a34a;--color-error: #dc2626;--color-error-dark: #b91c1c;--color-error-muted: #b00;--color-warning: #f59e0b;--color-bg: #eef0f4;--color-surface: #ffffff;--color-surface-alt: #f7f8fa;--color-border: #d1d5db;--color-border-light: #e5e7eb;--color-hover-bg: #eef2ff;--color-text: #111827;--color-text-secondary: #4b5563;--color-text-muted: #9ca3af;--color-dark-bg: #1a1a2e;--text-dark-primary: rgba(255, 255, 255, .85);--text-dark-secondary: rgba(255, 255, 255, .7);--text-dark-tertiary: rgba(255, 255, 255, .5);--text-dark-muted: rgba(255, 255, 255, .35);--overlay-bg: rgba(0, 0, 0, .7);--overlay-bg-medium: rgba(0, 0, 0, .4);--overlay-bg-light: rgba(0, 0, 0, .3);--text-base: .9375rem;--text-sm: .8125rem;--text-xs: .75rem;--text-2xs: .7rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.5rem;--radius-sm: 6px;--radius-lg: 12px;--shadow-card: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .04);--transition-fast: .15s ease;--debug-hit: #22c55e;--debug-miss: #ef4444;--debug-warning: #f59e0b}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:IBM Plex Sans,system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text)}#app{max-width:640px;margin:0 auto;padding:var(--space-lg);min-height:100vh;display:flex;flex-direction:column;justify-content:center}.study-screen{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-xl) 2rem;box-shadow:var(--shadow-card)}.study-status{text-align:center;padding:2rem;color:var(--color-text-secondary)}.study-error{color:var(--color-error-muted)}.study-btn{display:inline-block;margin-top:var(--space-lg);padding:var(--space-sm) 1.6rem;background:var(--color-primary);color:var(--color-surface);border:none;border-radius:var(--radius-sm);font-size:var(--text-base);font-weight:500;letter-spacing:.01em;cursor:pointer;transition:background var(--transition-fast)}.study-btn:disabled{opacity:.4;cursor:not-allowed}.study-btn:hover:not(:disabled){background:var(--color-primary-hover)}.experiment-start h2{margin-top:0}.experiment-section{margin-bottom:1.25rem}.experiment-section h3,.experiment-form h3{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin:0 0 var(--space-sm);border-bottom:1px solid var(--color-border-light);padding-bottom:var(--space-xs)}.experiment-dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem var(--space-lg);margin:0;font-size:var(--text-sm)}.experiment-dl dt{color:var(--color-text-secondary)}.experiment-dl dd{margin:0}.experiment-optional{font-weight:400;color:var(--color-text-muted);font-size:var(--text-sm)}.experiment-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin:.2rem 0 0}.experiment-sublabel{font-size:var(--text-xs);color:var(--color-text-muted);margin:var(--space-sm) 0 var(--space-xs);font-weight:500}.consent-notice{margin:var(--space-lg) 0;padding:var(--space-md) var(--space-lg);background:var(--color-surface-alt);border-left:3px solid var(--color-text-muted);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--text-sm);color:var(--color-text-secondary)}.consent-notice ul{margin:0;padding-left:1.2rem}.consent-notice li{margin-bottom:.2rem}.study-consent-label{display:block;margin-top:var(--space-lg);cursor:pointer}.study-form-group{margin-bottom:var(--space-md)}.study-form-group label{display:block;margin-bottom:.3rem;font-weight:600}.study-form-group input,.study-form-group select{width:100%;padding:.4rem;font-size:var(--text-base);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.study-form-group input:focus,.study-form-group select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb26}.study-avatar-grid{display:flex;gap:var(--space-lg);margin-top:var(--space-lg)}.study-avatar-card{flex:1;padding:var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-alt);font-size:var(--text-base);cursor:pointer;text-align:center;transition:border-color var(--transition-fast);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.study-avatar-card:hover{border-color:var(--color-primary)}.study-avatar-card.selected{border-color:var(--color-primary);background:var(--color-primary-light)}.avatar-thumb{width:100%;border-radius:var(--radius-sm)}.avatar-thumb-label{font-size:var(--text-sm);font-weight:500}.study-questionnaire fieldset{border:none;padding:0;margin:0 0 var(--space-lg)}.study-questionnaire legend{font-weight:600;margin-bottom:.35rem;font-size:var(--text-sm)}.study-required{color:var(--color-error-muted)}.study-likert-group{display:flex;flex-direction:row;align-items:flex-start;gap:0}.study-choice-group{display:flex;flex-direction:column;gap:.3rem}.study-likert-option{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);cursor:pointer;flex:1;text-align:center;padding:.4rem var(--space-xs);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-text-secondary);transition:background-color var(--transition-fast)}.study-likert-option:hover{background:var(--color-hover-bg)}.study-choice-option{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer}.study-likert-matrix{width:100%;border-collapse:collapse;margin-bottom:var(--space-sm)}.study-likert-matrix th{font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);padding:.35rem var(--space-sm);text-align:center;vertical-align:bottom}.study-likert-matrix td{padding:var(--space-sm);text-align:center}.study-likert-matrix-label{text-align:left!important;font-weight:600;font-size:var(--text-sm);padding-right:var(--space-lg)!important}.study-likert-matrix tbody tr{border-top:1px solid var(--color-border-light)}.study-likert-matrix tbody tr:hover{background:var(--color-hover-bg)}.study-likert-matrix input[type=radio]{cursor:pointer}@media(max-width:480px){.study-likert-matrix thead{display:none}.study-likert-matrix,.study-likert-matrix tbody,.study-likert-matrix tr,.study-likert-matrix td{display:block;width:100%}.study-likert-matrix tbody tr{padding:var(--space-md) 0}.study-likert-matrix-label{padding-right:0!important;margin-bottom:var(--space-sm)}.study-likert-matrix td:not(.study-likert-matrix-label){display:flex;align-items:center;gap:var(--space-sm);padding:.25rem var(--space-sm);text-align:left}.study-likert-matrix td:not(.study-likert-matrix-label):before{content:attr(data-label);font-size:var(--text-sm);color:var(--color-text-muted);min-width:8rem}}.study-textarea{width:100%;padding:.4rem;font-size:var(--text-base);border:1px solid var(--color-border);border-radius:var(--radius-sm);resize:vertical;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.study-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb26}.study-instruction{color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.study-placeholder{color:var(--color-text-muted);font-style:italic}.viewer-container{position:relative;width:100%;height:400px;background:var(--color-dark-bg);border-radius:var(--radius-lg);overflow:hidden;margin-top:var(--space-lg)}.viewer-canvas{display:block;width:100%;height:100%}.viewer-status{margin-top:var(--space-sm);font-size:var(--text-sm);color:var(--color-text-secondary)}.gaze-debug{position:absolute;bottom:8px;left:8px;display:flex;align-items:center;gap:6px;padding:4px 10px;background:var(--overlay-bg);border-radius:var(--radius-sm);font-size:var(--text-xs);color:#fff;pointer-events:none;z-index:1}.gaze-debug-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-text-muted)}.voice-bar{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-md);padding:var(--space-sm) 0}.voice-status{font-size:var(--text-sm);color:var(--color-text-secondary)}.voice-btn{margin-top:0;padding:.4rem var(--space-lg);font-size:var(--text-sm)}.voice-btn-stop{background:var(--color-error)}.voice-btn-stop:hover:not(:disabled){background:var(--color-error-dark)}.viewer-fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-dark-secondary);text-align:center;padding:2rem}.viewer-fallback-icon{width:48px;height:48px;margin-bottom:var(--space-sm);opacity:.4}.viewer-fallback-icon:before{content:"";display:block;width:20px;height:20px;margin:0 auto 4px;border-radius:50%;background:currentColor}.viewer-fallback-icon:after{content:"";display:block;width:36px;height:16px;margin:0 auto;border-radius:18px 18px 0 0;background:currentColor}.viewer-fallback-title{margin:var(--space-sm) 0 var(--space-xs);font-size:var(--text-base);font-weight:600;color:var(--text-dark-primary)}.viewer-fallback-hint{margin:0;font-size:var(--text-xs);color:var(--text-dark-muted);max-width:280px;line-height:1.4}.voice-bar-hidden{display:none}.viewer-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-dark-bg);z-index:20;pointer-events:none}.study-screen{position:relative}#app.conversation-active .viewer-loading{grid-column:1;grid-row:1 / -1}.viewer-loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.15);border-top-color:#ffffffb3;border-radius:50%;animation:viewer-spin .8s linear infinite}.viewer-loading-text{margin-top:var(--space-md);font-size:var(--text-sm);color:var(--text-dark-tertiary)}@keyframes viewer-spin{to{transform:rotate(360deg)}}.fsm-debug{position:absolute;top:8px;right:8px;padding:4px 10px;background:var(--overlay-bg);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-border);z-index:1}.mg-debug{position:absolute;top:34px;right:8px;padding:4px 10px;background:var(--overlay-bg);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-border);z-index:1}.eye-debug{position:absolute;top:60px;right:8px;padding:4px 10px;background:var(--overlay-bg);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-border);z-index:1}.calibration-source{font-size:var(--text-sm);color:var(--color-text-secondary);margin:var(--space-xs) 0 var(--space-sm)}.calibration-area{position:relative;width:100%;height:400px;background:var(--color-dark-bg);border-radius:var(--radius-lg);overflow:hidden;margin-top:var(--space-sm)}.gaze-cursor{position:absolute;width:20px;height:20px;border-radius:50%;background:#ef4444b3;border:2px solid rgba(255,255,255,.8);pointer-events:none;z-index:10;transform:translate(-50%,-50%);left:50%;top:50%;transition:background var(--transition-fast)}.gaze-cursor.intersecting{background:#22c55eb3}.calibration-point{position:absolute;width:62px;height:62px;border-radius:50%;border:3px solid rgba(255,255,255,.25);background:transparent;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:5}.calibration-point.active{border-color:#ffffffe6;animation:calibration-pulse 1.5s ease-in-out infinite}.calibration-point.passed{border-color:var(--color-success);background:#22c55e26;animation:none}.calibration-point-fill{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:#22c55e73;transform:scale(0);transform-origin:center}.calibration-point-num{position:relative;z-index:1;font-size:var(--text-sm);color:var(--text-dark-tertiary);font-weight:600;pointer-events:none}.calibration-point.passed .calibration-point-num{color:var(--color-success)}.calibration-point.skipped{border-color:var(--color-warning);background:#f59e0b26;animation:none}.calibration-point.skipped .calibration-point-num{color:var(--color-warning)}@keyframes calibration-pulse{0%,to{box-shadow:0 0 #fff6}50%{box-shadow:0 0 0 16px #fff0}}.calibration-stale{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--text-dark-tertiary);font-size:var(--text-sm);background:var(--overlay-bg-medium);z-index:15}.calibration-progress{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:var(--space-sm)}.calibration-success{color:var(--color-success-dark);font-weight:600;margin-top:var(--space-sm)}.calibration-skip{display:inline-block;margin-top:var(--space-sm);padding:0;background:none;border:none;color:var(--color-text-muted);font-size:var(--text-xs);cursor:pointer;text-decoration:underline}.calibration-skip:hover{color:var(--color-text-secondary)}.calibration-hint{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:12;padding:6px 14px;font-size:var(--text-xs);color:var(--text-dark-tertiary);background:var(--overlay-bg-medium);border-radius:var(--radius-sm);text-align:center;max-width:90%;pointer-events:none}.calibration-restart{display:inline-block;margin-top:var(--space-sm);margin-left:var(--space-lg);padding:0;background:none;border:none;color:var(--color-text-muted);font-size:var(--text-xs);cursor:pointer;text-decoration:underline}.calibration-restart:hover{color:var(--color-text-secondary)}#app.conversation-active{max-width:none;margin:0;padding:0;height:100vh;overflow:hidden}#app.conversation-active .study-screen{height:100%;border-radius:0;padding:0;box-shadow:none;background:var(--color-dark-bg);display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto auto auto}#app.conversation-active .viewer-container{grid-column:1;grid-row:1 / -1;height:auto;min-height:0;border-radius:0;margin-top:0;z-index:0}#app.conversation-active .study-screen>h2{grid-column:1;grid-row:1;align-self:start;justify-self:start;z-index:2;pointer-events:none;margin:8px;padding:4px 10px;font-size:var(--text-2xs);font-weight:400;color:var(--text-dark-muted);background:var(--overlay-bg-light);border-radius:var(--radius-sm)}#app.conversation-active .viewer-status{grid-column:1;grid-row:2;justify-self:start;z-index:2;margin:0 0 0 var(--space-md);padding:.2rem var(--space-md);font-size:var(--text-2xs);color:var(--text-dark-tertiary);background:var(--overlay-bg-medium);border-radius:var(--radius-sm)}#app.conversation-active .voice-bar{grid-column:1;grid-row:3;justify-self:start;z-index:2;margin:var(--space-xs) 0 var(--space-sm) var(--space-md);padding:.35rem var(--space-md);background:var(--overlay-bg-medium);border-radius:var(--radius-sm)}#app.conversation-active .voice-status{color:var(--text-dark-secondary);font-size:var(--text-xs)}#app.conversation-active .study-screen>.study-btn{grid-column:1;grid-row:4;justify-self:end;z-index:2;margin:var(--space-sm) var(--space-lg);padding:var(--space-sm) 1.4rem;border-radius:var(--radius-sm);font-size:var(--text-sm)}#app.conversation-active .calibration-area{grid-column:1;grid-row:1 / -1;height:auto;min-height:0;border-radius:0;margin-top:0;z-index:0}#app.conversation-active .study-screen>p:not(.calibration-progress):not(.calibration-success):not(.calibration-source){grid-column:1;grid-row:1;align-self:start;justify-self:start;z-index:2;pointer-events:none;margin:40px 8px 0;padding:4px 10px;font-size:var(--text-xs);color:var(--text-dark-tertiary);background:var(--overlay-bg-light);border-radius:var(--radius-sm);max-width:400px}#app.conversation-active .calibration-source{grid-column:1;grid-row:1;align-self:start;justify-self:end;z-index:2;pointer-events:none;margin:8px;padding:4px 10px;font-size:var(--text-2xs);color:var(--text-dark-tertiary);background:var(--overlay-bg-medium);border-radius:var(--radius-sm)}#app.conversation-active .calibration-progress{grid-column:1;grid-row:2;justify-self:start;z-index:2;margin:0 0 0 var(--space-md);padding:.2rem var(--space-md);font-size:var(--text-xs);color:var(--text-dark-tertiary);background:var(--overlay-bg-medium);border-radius:var(--radius-sm)}#app.conversation-active .calibration-success{grid-column:1;grid-row:3;justify-self:start;z-index:2;margin:var(--space-xs) 0 0 var(--space-md);padding:.3rem var(--space-md);font-size:var(--text-xs);color:var(--color-success);background:var(--overlay-bg-medium);border-radius:var(--radius-sm)}#app.conversation-active .calibration-skip{grid-column:1;grid-row:3;justify-self:start;align-self:end;z-index:2;margin:0 0 var(--space-sm) var(--space-md);padding:.2rem var(--space-sm);color:var(--text-dark-muted);font-size:var(--text-2xs);background:var(--overlay-bg-light);border-radius:var(--radius-sm);text-decoration:none}#app.conversation-active .calibration-skip:hover{color:var(--text-dark-secondary)}#app.conversation-active .calibration-restart{grid-column:1;grid-row:4;justify-self:end;z-index:2;margin:var(--space-sm) 12rem var(--space-sm) 0;padding:.2rem var(--space-sm);color:var(--text-dark-muted);font-size:var(--text-2xs);background:var(--overlay-bg-light);border-radius:var(--radius-sm);text-decoration:none}#app.conversation-active .calibration-restart:hover{color:var(--text-dark-secondary)}