/* Reset, typography, focus, and accessibility primitives. Physical left/right are never used — logical properties only, so the Arabic RTL mirror needs almost no overrides. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* The document scrollbar is kept, but slimmed and themed until it almost disappears — removing it entirely would break drag-scrolling. */ scrollbar-width: thin; scrollbar-color: var(--raised) transparent; } html::-webkit-scrollbar { inline-size: 8px; block-size: 8px; } html::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb { background: var(--raised); border-radius: 99px; } html::-webkit-scrollbar-thumb:hover { background: var(--line-strong); } /* The page background lives on so the fixed full-page canvas (a negative-z child of body) can sit above it but below all content. */ html { background: var(--bg); } body { font-family: var(--font-sans); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); line-height: 1.65; color: var(--fg); background: transparent; min-block-size: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } :lang(ar) { font-family: var(--font-arabic); line-height: 1.85; } h1, h2, h3, h4 { line-height: 1.18; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; } :lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 { letter-spacing: normal; line-height: 1.4; } h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem); } h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); } p { text-wrap: pretty; } a { color: var(--lime); text-underline-offset: 0.22em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } ul, ol { padding-inline-start: 1.25em; } img, svg, video { max-inline-size: 100%; block-size: auto; display: block; } code, pre { font-family: var(--font-mono); font-size: 0.875em; } pre { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); overflow-x: auto; direction: ltr; text-align: start; } :focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: var(--radius-sm); } /* Visible only when focused — the first stop for keyboard users. */ .skip-link { position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); z-index: 100; padding: var(--space-3) var(--space-5); background: var(--lime); color: var(--accent-ink); font-weight: 800; border-radius: var(--radius-pill); text-decoration: none; transform: translateY(-200%); } .skip-link:focus-visible { transform: none; } /* Kept in the accessibility tree and readable by crawlers — clipped, not hidden. `user-select: none` stops the clipped text being dragged along when a reader selects and copies the visible words around it. */ .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; -webkit-user-select: none; user-select: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }