:root { color-scheme: light; }
html, body, #jspsych-target { width: 100%; min-height: 100%; margin: 0; }
body { background: rgb(128, 128, 128); font-family: Arial, "Microsoft YaHei", sans-serif; }
.jspsych-content { max-width: none; width: 100%; }
.stage { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; background: rgb(128, 128, 128); }
.fixation { font-size: 56px; font-weight: 300; color: #111; }
.hv-canvas { display: block; width: 500px; height: 500px; }
.face { position: absolute; width: 50px; height: 50px; object-fit: contain; transform: translate(-50%, -50%); }
.noise { width: 500px; height: 500px; image-rendering: pixelated; }
.hv-image, .prompt-image, .instruction-image { display: block; max-width: min(90vw, 1000px); max-height: min(80vh, 700px); object-fit: contain; }
.feedback-image { width: 172px; height: auto; }
.demographics { width: min(520px, 88vw); text-align: left; line-height: 1.7; }
#jspsych-survey-html-form-preamble, #jspsych-survey-html-form { width: min(520px, 88vw); margin-left: auto; margin-right: auto; }
.demographics label { display: block; margin: 16px 0 4px; }
.demographics input, .demographics select { box-sizing: border-box; width: 100%; font: inherit; padding: 8px; }
.demographics button, .start-button { margin-top: 24px; padding: 10px 20px; font: inherit; cursor: pointer; }
.notice { width: min(680px, 88vw); text-align: center; line-height: 1.7; }