/* Language Bridge — base element styles */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); min-height: 100vh; } h1, h2, h3 { color: var(--navy); line-height: 1.15; margin: 0 0 var(--sp-3); } h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); } h2 { font-size: clamp(1.35rem, 3.5vw, 1.8rem); } h3 { font-size: clamp(1.1rem, 2.5vw, 1.3rem); } p { margin: 0 0 var(--sp-4); } a { color: var(--blue); } a:hover { color: var(--navy); } img { max-width: 100%; height: auto; } /* Visible focus for keyboard users (spec §29 accessibility) */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--sp-3); top: -3rem; background: var(--navy); color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: 0 0 8px 8px; z-index: 100; transition: top var(--t); } .skip-link:focus { top: 0; } /* Elements that only make sense in one mode; toggled by data-mode on */ [data-mode="student"] .teacher-only { display: none !important; } [data-mode="teacher"] .student-only { display: none !important; }