/* ============================================================ Accessibility settings — applied via data-* on . ============================================================ */ /* ---------- easier reading ---------- The evidence points at spacing more than typeface: wider letter and word spacing, taller lines, shorter measure, never justified. Lexend is designed for reading proficiency and is on Google Fonts. */ html[data-font="easier"] body, html[data-font="easier"] .lede, html[data-font="easier"] p, html[data-font="easier"] li, html[data-font="easier"] label, html[data-font="easier"] .step, html[data-font="easier"] button, html[data-font="easier"] input, html[data-font="easier"] select, html[data-font="easier"] textarea { font-family: "Lexend", "Instrument Sans", system-ui, sans-serif !important; letter-spacing: .04em; word-spacing: .12em; line-height: 1.9; } html[data-font="easier"] h1, html[data-font="easier"] h2, html[data-font="easier"] h3, html[data-font="easier"] h4 { font-family: "Lexend", "Bricolage Grotesque", sans-serif !important; letter-spacing: 0; line-height: 1.35; } html[data-font="easier"] p, html[data-font="easier"] .lede { max-width: 58ch; text-align: left; } html[data-font="easier"] .narrow p { max-width: none; } /* ---------- text size ---------- */ html[data-text="large"] { font-size: 118%; } html[data-text="xl"] { font-size: 138%; } /* ---------- reduced motion ---------- */ html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* balloons would otherwise sit off-screen with animation killed */ html[data-motion="reduced"] .balloon { animation: none !important; position: static; margin: .4rem; } html[data-motion="reduced"] .pop-field { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: auto; min-height: 200px; padding: 1rem; } html[data-motion="reduced"] .wheel { transition: none !important; } /* ---------- timers off ---------- */ html[data-timers="off"] .show-timer, html[data-timers="off"] .clock-hud strong#clock-time, html[data-timers="off"] .match-status .live-timer { display: none !important; } /* ---------- high contrast ---------- */ html[data-contrast="high"] { --ink: #000000; --ink-soft: #303030; --cream: #FFFFFF; --paper: #FFFFFF; --line: #000000; --fleece: #F2F2F2; } html[data-contrast="high"] .card, html[data-contrast="high"] .unit, html[data-contrast="high"] .lesson, html[data-contrast="high"] .tool { border-width: 3px; } html[data-contrast="high"] .btn-primary { background: #005A3C; box-shadow: none; } html[data-contrast="high"] .btn-secondary { border-width: 3px; box-shadow: none; } html[data-contrast="high"] .step-tag { border: 2px solid currentColor; } /* ---------- reading ruler ---------- */ .reading-ruler { position: fixed; left: 0; right: 0; height: 3.2rem; z-index: 60; pointer-events: none; display: none; border-top: 2px solid var(--jade); border-bottom: 2px solid var(--jade); background: rgba(239,168,28,.14); } html[data-ruler="on"] .reading-ruler { display: block; } /* ---------- the settings panel ---------- */ .a11y-open { position: fixed; right: 1rem; bottom: 1rem; z-index: 70; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); font-size: 1.4rem; cursor: pointer; box-shadow: var(--shadow-lg); display: grid; place-items: center; } .a11y-open:hover { background: var(--sun); } .a11y-panel { position: fixed; right: 1rem; bottom: 5rem; z-index: 71; width: min(340px, calc(100vw - 2rem)); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.3rem; max-height: 80vh; overflow-y: auto; } .a11y-panel[hidden] { display: none; } .a11y-panel h2 { font-size: 1.1rem; margin-bottom: .2rem; } .a11y-panel > p { font-size: .88rem; color: var(--ink-soft); margin-bottom: 1rem; } .a11y-group { margin-bottom: 1.1rem; } .a11y-group h3 { font-size: .82rem; margin-bottom: .45rem; } .a11y-group .hint { display: block; font-weight: 600; color: var(--ink-soft); font-size: .8rem; margin-bottom: .45rem; } .a11y-opts { display: flex; gap: .35rem; flex-wrap: wrap; } .a11y-opts button { border: 2px solid var(--line); background: var(--cream); border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; } .a11y-opts button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); } .a11y-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--line); } @media print { .a11y-open, .a11y-panel, .reading-ruler { display: none !important; } }