/* ============================================================ LearnWords AI — Global Reset Universal base styles; references tokens from tokens.css. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100vh; margin: 0; padding: 0; width: 100%; font-family: var(--font); background-color: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* `clip`, not `hidden`. Per CSS spec, setting either overflow axis to anything other than `visible` silently coerces the OTHER axis to `auto` — so `overflow-x: hidden; overflow-y: visible` actually computes as `overflow: hidden auto` and gives / their own scroll container. `position: sticky` on the parallel-text translate slider then sticks against that container's (zero-length) scroll range instead of the viewport, leaving it pinned to the end of the article instead of riding the viewport bottom (#169 follow-up). `clip` accepts a visible sibling on the other axis without coercion, so y stays truly visible and viewport-level sticky works again. */ overflow-x: clip; overflow-y: visible; touch-action: manipulation; /* Prevent layout shift when scrollbar appears */ scrollbar-gutter: stable; } body { padding-bottom: env(safe-area-inset-bottom, 0); /* Decorative page texture, set per theme by --paper-texture (night = starfield + Mars glow; paper = sun-wash + ruled stock; cool = none, so this is inert there). Each gradient layer self-sizes and self-positions (stars at %, ruled lines at their own 34px repeat), so we must NOT force a tiled background-size — that would shrink the starfield into a repeating grid. `fixed` keeps it viewport-anchored. */ background-image: var(--paper-texture); background-attachment: fixed; } body.modal-open { overflow: hidden !important; } /* --- Scrollbar (deduplicated; original had two thumb declarations) --- Both axes set: `width` styles vertical bars, `height` styles horizontal bars (e.g. the Library shelves). Without `height` the horizontal bar falls back to the OS default — fat on Windows. */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--hint); }