.aq {
border: 2px solid var(--fnv-ink);
background: var(--fnv-surface);
color: var(--fnv-ink);
padding: 22px 24px;
margin-top: 48px;
}
.aq--practice { margin-top: 0; }
.aq__hd {
border-bottom: 1px solid var(--fnv-border);
padding-bottom: 12px;
margin-bottom: 18px;
}
.aq__t {
font-size: 1.375rem;
font-weight: 800;
line-height: 1.5;
margin: 0 0 4px;
}
.aq__sub {
--fnv-size-p: .875rem;
color: var(--fnv-ink-muted);
margin: 0;
}
.aq__meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.aq__step {
font-size: .8125rem;
font-weight: 700;
color: var(--fnv-ink-muted);
white-space: nowrap;
}
.aq__bar,
.aq__mbar {
display: block;
flex: 1;
height: 6px;
background: var(--fnv-surface-2);
border: 1px solid var(--fnv-n-300);
}
.aq__bar-f,
.aq__mbar-f {
display: block;
height: 100%;
width: 0;
background: var(--fnv-ink);
transition: width .25s ease-out;
}
.aq__mhd { margin-bottom: 18px; }
.aq__mastery {
font-size: .8125rem;
color: var(--fnv-ink-muted);
margin-top: 6px;
}
.aq__src {
--fnv-size-p: .8125rem;
color: var(--fnv-ink-muted);
margin: 0 0 6px;
}
.aq__q {
font-size: 1.125rem;
font-weight: 800;
line-height: 1.75;
margin: 0 0 16px;
}
.aq__q:focus { outline: none; }
.aq__q:focus-visible { outline: 2px solid var(--fnv-ink); outline-offset: 4px; }
.aq__opts {
display: flex;
flex-direction: column;
gap: 8px;
}
.aq__opt {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
text-align: start;
font: inherit;
font-size: .9375rem;
line-height: 1.75;
padding: 11px 14px;
border: 1px solid var(--fnv-n-300);
background: var(--fnv-surface);
color: var(--fnv-ink);
cursor: pointer;
transition: border-color .15s ease-out;
}
.aq__opt:hover:not(:disabled) { border-color: var(--fnv-ink); }
.aq__opt:focus-visible { outline: 2px solid var(--fnv-ink); outline-offset: 2px; }
.aq__opt:disabled { cursor: default; }
.aq__opt:disabled:not(.is-ok, .is-no) { color: var(--fnv-ink-muted); }
.aq__key {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.9em;
block-size: 1.9em;
border: 1px solid currentColor;
font-size: .8125rem;
font-weight: 800;
line-height: 1;
}
.aq__txt { flex: 1; min-width: 0; }
.aq__tag {
flex: none;
align-self: center;
margin-inline-start: auto;
font-weight: 800;
white-space: nowrap;
}
.aq__opt.is-ok { border: 2px solid var(--fnv-gamma-pos); padding: 10px 13px; }
.aq__opt.is-no { border: 2px solid var(--fnv-gamma-neg-text); padding: 10px 13px; }
.aq__opt.is-ok .aq__key,
.aq__opt.is-ok .aq__tag { color: var(--fnv-gamma-pos); }
.aq__opt.is-no .aq__key,
.aq__opt.is-no .aq__tag { color: var(--fnv-gamma-neg-text); }
.aq__fb {
margin-top: 14px;
padding: 12px 14px;
border-inline-start: 3px solid var(--fnv-n-300);
background: var(--fnv-surface-2);
font-size: .9375rem;
line-height: 1.85;
}
.aq__fb.is-ok { border-inline-start-color: var(--fnv-gamma-pos); }
.aq__fb.is-no { border-inline-start-color: var(--fnv-gamma-neg-text); }
.aq__fb-h { display: block; font-weight: 800; margin-bottom: 2px; }
.aq__fb-e { display: block; }
.aq__act {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
margin-top: 16px;
}
.aq__btn {
font: inherit;
font-size: .9375rem;
font-weight: 800;
padding: 10px 22px;
border: 2px solid var(--fnv-ink);
background: var(--fnv-ink);
color: var(--fnv-surface);
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease-out, color .15s ease-out;
}
.aq__btn:hover,
.aq__btn:focus-visible { background: var(--fnv-surface); color: var(--fnv-ink); }
.aq__btn:focus-visible { outline: 2px solid var(--fnv-ink); outline-offset: 2px; }
.aq__btn--ghost { background: var(--fnv-surface); color: var(--fnv-ink); }
.aq__btn--ghost:hover,
.aq__btn--ghost:focus-visible { background: var(--fnv-ink); color: var(--fnv-surface); }
.aq__link {
font-size: .875rem;
font-weight: 700;
color: var(--fnv-ink);
text-decoration: underline;
text-underline-offset: 5px;
}
.aq__score {
--fnv-size-p: 1.5rem;
font-weight: 800;
margin: 0 0 4px;
}
.aq__score:focus { outline: none; }
.aq__msg {
--fnv-size-p: .9375rem;
color: var(--fnv-ink-2);
margin: 0 0 14px;
}
.aq__miss {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 18px;
padding-inline-start: 1.25em;
font-size: .9375rem;
line-height: 1.8;
}
.aq__miss b { display: block; }
.aq__miss-a { display: block; font-weight: 700; }
.aq__miss-e { display: block; font-size: .875rem; color: var(--fnv-ink-muted); }
.aq__sugg {
display: flex;
flex-direction: column;
gap: 4px;
border: 1px solid var(--fnv-n-300);
border-inline-start: 4px solid var(--fnv-ink);
padding: 12px 14px;
margin: 0 0 16px;
}
.aq__sugg-k { font-size: .8125rem; font-weight: 800; color: var(--fnv-ink-muted); }
.aq__sugg-a { font-size: 1rem; font-weight: 800; color: var(--fnv-ink); }
.aq__sugg-n { font-size: .875rem; color: var(--fnv-ink-muted); }
.aq__ready {
border: 1px solid var(--fnv-n-300);
border-inline-start: 4px solid var(--fnv-ink);
padding: 12px 14px;
margin-top: 14px;
}
.aq__ready-k { font-size: .8125rem; font-weight: 800; color: var(--fnv-ink-muted); }
.aq__ready-v { font-size: 1rem; font-weight: 800; margin: 2px 0 4px; }
.aq__ready-n { --fnv-size-p: .8125rem; color: var(--fnv-ink-muted); margin: 0; }
.aq-page {
max-width: 780px;
margin: 0 auto;
padding: 28px 16px 64px;
}
.aq-page__hd {
border-bottom: 2px solid var(--fnv-ink);
padding-bottom: 14px;
margin-bottom: 22px;
}
.aq-page__t {
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
font-weight: 800;
line-height: 1.4;
margin: 0 0 8px;
}
.aq-page__s {
--fnv-size-p: .9375rem;
color: var(--fnv-ink-muted);
margin: 0;
}
@media (max-width: 575.98px) {
.aq { padding: 18px 16px; }
.aq__q { font-size: 1.0625rem; }
.aq__tag { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.aq__bar-f,
.aq__mbar-f,
.aq__opt,
.aq__btn { transition: none; }
}