*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100%;overflow:hidden}.app{width:100vw;height:100vh;background-color:#0a1628;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}.trial-counter{position:absolute;top:10px;right:10px;color:#ffffffb3;font-size:13px;z-index:100;background:rgba(0,102,153,.3);padding:6px 12px;border-radius:16px}.experiment-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;padding:10px}.fixation-cross{position:relative;width:200px;height:200px}.cross-vertical,.cross-horizontal{position:absolute;background-color:#fff}.grey-cross .cross-vertical,.grey-cross .cross-horizontal{background-color:gray}.cross-vertical{width:3px;height:200px;left:98.5px;top:0}.cross-horizontal{width:200px;height:3px;left:0;top:98.5px}.stimulus-image{max-width:85vw;max-height:70vh;object-fit:contain}.test-phase{display:flex;flex-direction:column;align-items:center;gap:20px}.response-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 15px;width:100%;max-width:400px}.response-btn{padding:14px 16px;font-size:15px;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;font-family:inherit;background-color:#1e3a5f;color:#fff;border:1px solid #2d5a8a}.response-btn:hover{background-color:#2d5a8a;transform:translateY(-1px)}.response-btn:active{transform:translateY(0)}.response-btn.absolutely-same{background-color:#069;border-color:#08c}.response-btn.absolutely-same:hover{background-color:#08c}.response-btn.possibly-same{background-color:#2d7d46;border-color:#3d9d56}.response-btn.possibly-same:hover{background-color:#3d9d56}.response-btn.possibly-different{background-color:#b8860b;border-color:#d4a017}.response-btn.possibly-different:hover{background-color:#d4a017}.response-btn.absolutely-different{background-color:#8b4513;border-color:sienna}.response-btn.absolutely-different:hover{background-color:sienna}.response-feedback{color:#fff;font-size:16px;padding:12px 24px;background-color:#0696;border-radius:8px;border:1px solid rgba(0,136,204,.5)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.welcome-screen{color:#fff;width:100%;max-width:500px;padding:15px;text-align:left;overflow-y:auto;max-height:95vh}.welcome-screen h1{text-align:center;font-size:22px;margin-bottom:12px;color:#fff;font-weight:600;letter-spacing:.5px}.welcome-screen h1.medical-title{color:#00a8e8;font-size:20px}.welcome-content{background:linear-gradient(135deg,rgba(0,102,153,.15) 0%,rgba(0,51,102,.2) 100%);border-radius:12px;padding:15px;line-height:1.6;border:1px solid rgba(0,136,204,.2)}.welcome-screen h2{color:#00a8e8;font-size:16px;margin-top:12px;margin-bottom:8px;font-weight:600}.welcome-screen h2:first-of-type{margin-top:0}.welcome-screen p{margin-bottom:10px;font-size:14px;color:#ffffffd9}.welcome-screen ul{margin-left:18px;margin-bottom:10px}.welcome-screen li{margin-bottom:6px;font-size:13px;color:#ffffffd9}.welcome-screen ul ul{margin-top:6px;margin-left:16px}.welcome-screen ul ul li{margin-bottom:4px;font-size:12px;color:#ffffffbf}.start-buttons{display:flex;gap:12px;justify-content:center;margin:15px auto 0;flex-wrap:wrap}.back-button{padding:12px 24px;font-size:15px;font-weight:600;background-color:transparent;color:#ffffffb3;border:1px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;transition:all .2s}.back-button:hover{background-color:#ffffff1a;color:#fff}.start-button{padding:14px 32px;font-size:16px;font-weight:600;background:linear-gradient(135deg,#006699 0%,#0088cc 100%);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #0696}.start-button:hover{background:linear-gradient(135deg,#0088cc 0%,#00a8e8 100%);transform:translateY(-1px);box-shadow:0 6px 16px #0088cc80}.start-button:active{transform:translateY(0)}.completion-stats{margin:12px 0}.completion-stats h3{color:#00a8e8;font-size:15px;margin-bottom:8px}.completion-stats ul{list-style:none;margin-left:0}.completion-stats li{padding:6px 10px;background-color:#00669926;margin-bottom:4px;border-radius:4px;font-size:13px}.completion-actions{display:flex;gap:12px;justify-content:center;margin-top:15px;flex-wrap:wrap}.restart-button{padding:12px 28px;font-size:15px;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;background:linear-gradient(135deg,#2d7d46 0%,#3d9d56 100%);color:#fff;box-shadow:0 4px 12px #2d7d4666}.restart-button:hover{background:linear-gradient(135deg,#3d9d56 0%,#4dbd66 100%);transform:translateY(-1px)}.close-button{padding:12px 28px;font-size:15px;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;background:linear-gradient(135deg,#666 0%,#888 100%);color:#fff;box-shadow:0 4px 12px #64646466}.close-button:hover{background:linear-gradient(135deg,#888 0%,#aaa 100%);transform:translateY(-1px)}.loading-indicator{margin:15px 0;text-align:center}.loading-indicator p{color:#00a8e8;font-size:14px;margin-bottom:10px}.progress-bar{width:100%;max-width:300px;height:6px;background-color:#ffffff1a;border-radius:3px;overflow:hidden;margin:0 auto}.progress-fill{height:100%;background:linear-gradient(90deg,#006699,#00a8e8);transition:width .3s ease;border-radius:3px}.start-button:disabled{background:#444;cursor:not-allowed;box-shadow:none}.start-button:disabled:hover{background:#444;transform:none;box-shadow:none}.test2-phase{display:flex;flex-direction:column;align-items:center;gap:15px;padding:10px;width:100%;max-width:500px;margin:0 auto}.grid-3x3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.grid-item{position:relative;cursor:pointer;border:2px solid rgba(255,255,255,.2);border-radius:6px;overflow:hidden;transition:border-color .15s,transform .1s}.grid-item:hover{border-color:#00a8e899;transform:scale(1.02)}.grid-item.no-pointer{cursor:default;pointer-events:none}.grid-item.selected{border-color:#00a8e8;box-shadow:0 0 12px #00a8e866}.grid-image{width:100%;height:auto;display:block}.selection-checkmark{position:absolute;top:5px;right:5px;width:24px;height:24px;background:#00a8e8;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;pointer-events:none;box-shadow:0 2px 6px #0006}.confirm-button{padding:12px 50px;font-size:16px;font-weight:600;background:linear-gradient(135deg,#006699 0%,#0088cc 100%);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #0696}.confirm-button:hover{background:linear-gradient(135deg,#0088cc 0%,#00a8e8 100%);transform:translateY(-1px)}.confirm-button:active{transform:translateY(0)}.confirm-button:disabled{background:#444;cursor:not-allowed;box-shadow:none;transform:none}.participant-form{margin-top:12px}.form-group{margin-bottom:12px}.form-group label{display:block;color:#ffffffd9;font-size:14px;margin-bottom:6px}.form-group input[type=text],.form-group input[type=number]{width:100%;max-width:100%;padding:10px 14px;font-size:15px;border:1px solid rgba(0,136,204,.3);border-radius:6px;background-color:#0033664d;color:#fff;transition:border-color .2s}.form-group input[type=text]:focus,.form-group input[type=number]:focus{outline:none;border-color:#00a8e8}.form-group input[type=text]::placeholder,.form-group input[type=number]::placeholder{color:#fff6}.gender-options{display:flex;gap:20px;margin-top:6px}.radio-label{display:flex;align-items:center;gap:8px;color:#ffffffd9;font-size:14px;cursor:pointer}.radio-label input[type=radio]{width:16px;height:16px;accent-color:#00a8e8}.form-error{color:#ff6b6b;font-size:13px;margin-top:8px;padding:8px 12px;background-color:#ff6b6b26;border-radius:6px;text-align:center;border:1px solid rgba(255,107,107,.3)}.save-info{color:#4dbd66;font-size:14px;padding:10px 12px;background-color:#4dbd6626;border-radius:6px;text-align:center;margin-top:10px;border:1px solid rgba(77,189,102,.3)}.participant-info-display{padding:10px 12px;background-color:#0693;border-radius:6px;margin-bottom:12px;border:1px solid rgba(0,136,204,.2)}.participant-info-display p{color:#fffc;font-size:13px;margin-bottom:0}.experiment-info-box{background:linear-gradient(135deg,rgba(0,102,153,.2) 0%,rgba(0,51,102,.25) 100%);border-radius:8px;padding:12px;margin-bottom:12px;border:1px solid rgba(0,136,204,.25)}.experiment-info-box p{margin-bottom:6px;font-size:13px;color:#ffffffe6}.experiment-info-box p:last-child{margin-bottom:0}.experiment-info-box strong{color:#00a8e8}.completion-message{text-align:center;margin-bottom:15px}.completion-message h2{color:#4dbd66;font-size:18px;margin-bottom:8px}.completion-message p{font-size:14px;color:#ffffffd9}.transition-box{background:linear-gradient(135deg,rgba(0,102,153,.2) 0%,rgba(0,51,102,.25) 100%);border-radius:10px;padding:20px;text-align:center;border:1px solid rgba(0,136,204,.25)}.transition-box h2{color:#00a8e8;font-size:18px;margin-bottom:12px}.transition-box p{font-size:14px;color:#ffffffd9;margin-bottom:15px}@media (max-width: 480px){.welcome-screen{padding:10px}.welcome-screen h1{font-size:18px;margin-bottom:10px}.welcome-content{padding:12px}.welcome-screen h2{font-size:15px}.welcome-screen p,.welcome-screen li{font-size:13px}.start-buttons{flex-direction:column;gap:10px}.start-button,.back-button,.restart-button,.close-button{width:100%;padding:14px 20px}.response-buttons{gap:8px}.response-btn{padding:12px 14px;font-size:14px}.fixation-cross{width:150px;height:150px}.cross-vertical{height:150px;left:73.5px}.cross-horizontal{width:150px;top:73.5px}.stimulus-image{max-width:90vw;max-height:60vh}.grid-3x3{gap:6px}.selection-checkmark{width:20px;height:20px;font-size:12px;top:4px;right:4px}.trial-counter{font-size:12px;padding:5px 10px}.participant-form .form-group{margin-bottom:10px}.gender-options{gap:15px}.completion-actions{flex-direction:column;gap:10px}.completion-actions button{width:100%}}@supports (-webkit-touch-callout: none){.app{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.trial-counter{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}.welcome-screen{-webkit-overflow-scrolling:touch}}.app{touch-action:manipulation}.response-btn,.start-button,.confirm-button,.restart-button,.close-button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}