.accessible-react-lesson .a11y-demo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-150);padding:var(--cf-space-250) var(--cf-space-350);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-150);background:var(--cf-color-surface);color:var(--cf-color-text);font-size:var(--cf-font-size-325)}.accessible-react-lesson .a11y-demo .fake-button,.accessible-react-lesson .a11y-demo button{padding:var(--cf-space-050) var(--cf-space-250);border:1px solid var(--cf-color-border-strong);border-radius:var(--cf-radius-100);background:var(--cf-color-surface-raised);color:var(--cf-color-text);font:inherit;font-size:var(--cf-font-size-300);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.accessible-react-lesson .a11y-demo .fake-button:hover,.accessible-react-lesson .a11y-demo button:hover{border-color:var(--cf-color-border-hover)}.accessible-react-lesson .a11y-demo p{flex-basis:100%;margin:0;overflow-wrap:anywhere}.accessible-react-lesson .a11y-presses{color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-300)}.accessible-react-lesson .a11y-checklist,.accessible-react-lesson .a11y-heard{display:grid;grid-gap:var(--cf-space-100);gap:var(--cf-space-100);margin:var(--cf-space-250) 0 0;padding:0;font-size:var(--cf-font-size-300);list-style:none}.accessible-react-lesson .a11y-checklist li,.accessible-react-lesson .a11y-heard li{margin:0;overflow-wrap:anywhere}.accessible-react-lesson .a11y-checklist strong,.accessible-react-lesson .a11y-heard strong{display:inline-block;min-width:var(--cf-space-700)}.accessible-react-lesson .a11y-checklist .is-yes strong{color:var(--cf-color-success)}.accessible-react-lesson .a11y-checklist .is-no{color:var(--cf-color-text-secondary)}.accessible-react-lesson .a11y-checklist .is-no strong{color:var(--cf-color-danger)}.accessible-react-lesson .a11y-heard .is-announced strong{color:var(--cf-color-success)}.accessible-react-lesson .a11y-heard .is-missed strong,.accessible-react-lesson .a11y-heard .is-silent strong{color:var(--cf-color-danger)}.accessible-react-lesson .a11y-heard .is-empty{color:var(--cf-color-text-tertiary)}@media(max-width:768px){.accessible-react-lesson .a11y-demo{padding:var(--cf-space-200)}}