.tool-page .practice-trainer{--practice-blush:color-mix(in srgb, var(--primary) 8%, var(--surface));border:1px solid var(--border);border-top:4px solid var(--primary);background:var(--surface);min-width:0;color:var(--text);border-radius:8px;padding:28px;font-size:1rem;line-height:1.6}.tool-page .practice-trainer h2{letter-spacing:-.035em;color:var(--heading);margin:0 0 12px;font-size:clamp(1.375rem,2.3vw,1.75rem);font-weight:750;line-height:1.25}.tool-page .practice-trainer h3{color:var(--heading);margin:0 0 8px;font-size:1.125rem;font-weight:700}.tool-page .practice-trainer p{margin:0 0 12px;font-size:1rem}.tool-page .practice-trainer-toolbar{border:1px solid var(--border);background:var(--practice-blush);border-radius:6px;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 16px;margin-block:20px;padding:20px;display:grid}.tool-page .practice-trainer-toolbar>label,.tool-page .practice-trainer-toolbar>div{flex:200px;gap:6px;min-width:0;font-weight:650;display:grid}.tool-page .practice-trainer-toolbar>label,.tool-page .practice-trainer-toolbar>p{grid-column:1/-1;margin:0}.tool-page .practice-trainer-toolbar>select{grid-area:2/1}.tool-page .practice-trainer-toolbar>button{grid-area:2/2}.tool-page .practice-trainer-toolbar select,.tool-page .practice-trainer select{box-sizing:border-box;background-color:var(--surface);width:100%;min-width:0;max-width:100%;min-height:48px;color:var(--text);font:inherit;border:1px solid #939197;border-radius:5px;padding:10px 34px 10px 12px}.tool-page .practice-trainer-help,.tool-page .practice-trainer-meta{color:var(--muted)}.tool-page .practice-trainer .practice-trainer-meta{font-size:.875rem}.tool-page .practice-trainer-status{color:var(--primary);margin-block:12px;font-weight:650}.tool-page .practice-trainer-questions{gap:16px;margin-block:20px;display:grid}.tool-page .practice-trainer-question{border:1px solid var(--border);background:var(--surface);border-radius:6px;min-width:0;margin:0 0 18px;padding:18px 20px 20px}.tool-page fieldset.practice-trainer-question>legend{max-width:100%;color:var(--heading);overflow-wrap:anywhere;padding-inline:6px;font-size:1rem;font-weight:700;line-height:1.5}.tool-page .practice-trainer-prompt{color:var(--heading);font-size:1.0625rem;font-weight:600;line-height:1.6}.tool-page .practice-trainer-input{background:var(--surface);width:100%;min-width:0;max-width:28rem;min-height:48px;color:var(--text);font:inherit;border:1px solid #939197;border-radius:5px;padding:10px 12px;display:block}.tool-page .practice-trainer-input[readonly],.tool-page .practice-trainer-input:disabled{background:color-mix(in srgb, var(--border) 18%, var(--surface));color:var(--text);opacity:1}.tool-page .practice-trainer-input[aria-invalid=true]{border:2px solid var(--primary)}.tool-page .practice-trainer-options{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:8px;margin-block:10px 0;display:grid}.tool-page .practice-trainer-option{border:1px solid var(--border);min-width:0;min-height:48px;color:var(--text);background:var(--surface);cursor:pointer;border-radius:5px;align-items:center;gap:10px;padding:10px 12px;font-weight:500;line-height:1.4;display:flex}.tool-page .practice-trainer-option:has(input:checked){border-color:var(--primary);background:var(--practice-blush)}.tool-page .practice-trainer-option input{width:20px;height:20px;accent-color:var(--primary);flex:none;margin:0}.tool-page .practice-trainer-option:has(input:disabled){cursor:default}.tool-page .practice-trainer-feedback{border-left:3px solid var(--primary);background:var(--practice-blush);color:var(--text);margin-top:12px;padding:12px 14px;line-height:1.6}.tool-page .practice-trainer-feedback p:last-child{margin-bottom:0}.tool-page .practice-trainer-feedback strong{color:var(--heading)}.tool-page .practice-trainer-actions{flex-wrap:wrap;align-items:center;gap:10px;margin-block:20px;display:flex}.tool-page .practice-trainer button{border:1px solid var(--primary);background:var(--primary);max-width:100%;min-height:48px;color:var(--on-primary);font:inherit;cursor:pointer;border-radius:5px;padding:11px 18px;font-weight:700;line-height:1.4}.tool-page .practice-trainer button:hover:not(:disabled){background:color-mix(in srgb, var(--primary) 85%, #000)}.tool-page .practice-trainer button.secondary{background:var(--surface);color:var(--primary)}.tool-page .practice-trainer button:disabled{opacity:.65;cursor:default}.tool-page .practice-trainer-summary{border:1px solid var(--border);border-left:4px solid var(--primary);background:var(--practice-blush);border-radius:5px;margin-block:20px;padding:20px;scroll-margin-top:24px}.tool-page .practice-trainer-summary:focus{outline:3px solid var(--focus);outline-offset:4px}.tool-page .practice-trainer-audio,.tool-page .practice-trainer audio{width:100%;max-width:100%;margin-block:16px 8px;display:block}.tool-page .practice-trainer details{border:1px solid var(--border);background:var(--surface);border-radius:5px;margin-block:16px;padding:0}.tool-page .practice-trainer summary{min-height:48px;color:var(--primary);cursor:pointer;padding:13px 16px;font-weight:650}.tool-page .practice-trainer details>:not(summary){margin:0;padding:0 16px 16px}.tool-page .practice-trainer :where(a,button,input,select,summary):focus-visible{outline:3px solid var(--focus);outline-offset:4px}@media (width<=600px){.tool-page .practice-trainer{padding:20px 16px}.tool-page .practice-trainer-toolbar{grid-template-columns:minmax(0,1fr);align-items:stretch;padding:16px}.tool-page .practice-trainer-toolbar>select,.tool-page .practice-trainer-toolbar>button{grid-area:auto/1}.tool-page .practice-trainer-toolbar>label,.tool-page .practice-trainer-toolbar>div{flex:0 auto;width:100%}.tool-page .practice-trainer-question{padding:14px 12px 16px}.tool-page .practice-trainer-options{grid-template-columns:minmax(0,1fr)}.tool-page .practice-trainer-actions{flex-direction:column;align-items:stretch}.tool-page .practice-trainer-actions button{width:100%}.tool-page .practice-trainer-summary{padding:16px}}.tool-page .practice-trainer [data-grammar-hint],.tool-page .practice-trainer-question>label{margin-block:6px;font-size:.9375rem;display:block}.tool-page .practice-trainer .practice-trainer-settings>.practice-trainer-toolbar{border:0;border-top:1px solid var(--border);border-radius:0;margin:0;padding:16px}.tool-page .practice-trainer-summary button{margin-top:6px}.tool-page .practice-trainer [tabindex="-1"]:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.tool-page .practice-trainer .practice-trainer-summary .practice-trainer-actions{margin-bottom:0}.tool-page .practice-trainer .practice-trainer-summary button.secondary:hover{background:var(--practice-blush);color:var(--primary)}
