/* Comprehension study: large targets, no decoration competing with the thing being judged. */
.study{max-width:900px}
.study h1{font-size:clamp(34px,6vw,54px)}
.legend{border:1px solid var(--line);background:#101413;padding:22px 24px;margin:32px 0 26px}
.legend h2{font:normal 20px var(--serif);margin:0 0 12px}
.legend p{margin:0 0 10px;font-size:14px;line-height:1.7}
.legend strong{color:var(--accent);font-weight:400}
.legend-note{color:#93a096;font-size:13px!important;border-top:1px solid var(--line);padding-top:12px;margin-top:14px!important}
.study .fine{font-size:12px;color:#93a096;line-height:1.7;max-width:640px}
.study .camera-button{width:auto;gap:14px;min-height:56px;padding:14px 26px;margin:18px 0 10px}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 22px}
.panels.single{grid-template-columns:1fr;max-width:520px}
.panels figure{margin:0;position:relative;background:radial-gradient(ellipse at 50% 45%,#162323 0%,#101717 40%,#0b1010 100%);border:1px solid var(--line)}
.panels canvas{display:block;width:100%;aspect-ratio:4/3}
.panels figcaption{position:absolute;left:10px;top:8px;font-size:12px;letter-spacing:.18em;color:#b9c4b9;text-shadow:0 1px 4px #000}
#trial h2{font:normal clamp(20px,3.4vw,27px)/1.35 var(--serif);margin:0 0 8px}
#trial .muted{margin-bottom:18px;max-width:620px}
.options{display:flex;flex-direction:column;gap:10px;max-width:620px}
.study-option{text-align:left;border:1px solid #3a443d;background:#101413;color:var(--text);font:15px var(--sans);padding:16px 18px;min-height:56px;transition:background .15s,border-color .15s}
.study-option:hover{background:#18201c;border-color:#6d7a6e}
.study-option:active{background:#20281f}
.results-table{margin:26px 0 18px;border-top:1px solid var(--line)}
.result-row{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.result-row span{font-size:14px;color:#c6cfc6}
.result-row output{font-variant-numeric:tabular-nums;font-size:19px;color:var(--accent)}
.result-row small{grid-column:1/-1;font-size:12px;color:#93a096}
.export-label{display:block;font-size:11px;letter-spacing:.14em;color:#93a096;margin:20px 0 8px}
#export{width:100%;background:#0d1211;color:#cfd7cd;border:1px solid var(--line);padding:12px;font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.selftest-actions{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 4px}
.selftest-actions .quiet-button{border:1px solid #3a443d;padding:14px 18px;min-height:52px;font-size:13px;color:#cdb38a;background:#101413}
@media(max-width:740px){.panels{gap:10px}.panels canvas{aspect-ratio:1/1}.legend{padding:18px}.study-option{font-size:14px;padding:15px 16px}}