.photo-tests { max-width: 1000px; margin: 2rem auto; padding: 0 1rem 3rem; }
.photo-tests, .photo-tests * { box-sizing: border-box; }
.photo-tests { color: var(--ink, #152535); }
.photo-tests h1, .photo-tests h2 { color: inherit; letter-spacing: normal; text-transform: none; }
.photo-tests a, .photo-tests a:visited { color: inherit; text-decoration: underline; }
.photo-tests a:hover, .photo-tests a:focus-visible { text-decoration-thickness: 3px; }
.photo-tests button { background: #132334; color: #fff; border: 2px solid #132334; border-radius: 6px; white-space: normal; }
.photo-tests button:hover { background: #263e55; }
.photo-tests :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.photo-tests input, .photo-tests select { background: #fff; color: #132334; border: 1px solid #526476; border-radius: 4px; }
.photo-tests input[type=checkbox] { width: 22px; min-height: 22px; }
.photo-tests p { max-width: 80ch; line-height: 1.6; }
.photo-tests section, .photo-tests details { border: 1px solid var(--line, #888); border-radius: 12px; padding: 1rem; margin: 1.5rem 0; }
.photo-tests summary { cursor: pointer; font-size: 1.1rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin: 1rem 0; }
.photo-grid figure { margin: 0; }
.photo-grid img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: white; border-radius: 8px; }
.photo-grid figcaption { margin-top: .4rem; }
.photo-grid strong { display: block; }
.photo-tests button, .photo-tests input, .photo-tests select { min-height: 44px; max-width: 100%; font: inherit; }
.photo-tests button { padding: .5rem .8rem; margin: .4rem; cursor: pointer; }
.start-test > label { display: block; margin: 1rem 0; }
.start-test > label > input { display: block; width: min(100%, 32rem); }
.photo-tests .error { color: inherit; border: 2px solid currentColor; padding: .75rem; font-weight: bold; }
.photo-tests .note { color: var(--muted, #777); }