:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#000; color:#fff; font-family:Arial,"Microsoft YaHei",sans-serif; }
body { min-height:100vh; }
#app { width:100vw; height:100vh; position:relative; }
.hidden { display:none !important; }
.panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(900px,88vw); text-align:center; line-height:1.65; font-size:clamp(18px,2vw,30px); }
h1 { margin:0 0 28px; font-size:clamp(30px,4vw,54px); }
label { display:block; margin:16px auto; }
input { font-size:24px; width:220px; padding:10px 12px; margin-left:12px; }
button { margin-top:24px; font-size:22px; padding:12px 28px; cursor:pointer; }
.small { opacity:.65; font-size:16px; }
.keys { margin:24px 0; }
.fixation { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:76px; }
#trialArea { position:absolute; inset:0; }
.stim { position:absolute; width:40px; background:#fff; top:50%; transform:translate(-50%,-50%); }
.stim-label { position:absolute; left:120px; top:50%; transform:translateY(-50%); white-space:nowrap; font-size:32px; }
#stdStim { left:50%; height:160px; }
#cmpStim { height:160px; }
#trialHint { position:absolute; left:50%; bottom:54px; transform:translateX(-50%); width:100%; text-align:center; color:#888; font-size:clamp(17px,1.8vw,28px); }
#progress { position:absolute; right:24px; top:18px; color:#777; font-size:18px; }
#feedback { color:#baffba; }
#end { font-size:clamp(17px,1.7vw,25px); white-space:pre-line; }
#end button { display:inline-block; margin:18px 8px 0; }

.home-link{position:fixed;left:22px;top:18px;color:#aaa;text-decoration:none;font-size:15px;z-index:10}.home-link:hover{color:#fff;text-decoration:underline}