/* System font stack. No web font, no font host, no third-party request. */ :root { --bg: #fbfaf8; --fg: #1a1a18; --muted: #5c5a55; --rule: #ddd9d2; --accent: #7a2e1e; } @media (prefers-color-scheme: dark) { :root { --bg: #14140f; --fg: #eae7e0; --muted: #9a968d; --rule: #2e2d28; --accent: #d98b6a; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 ui-serif, Georgia, "Times New Roman", serif; -webkit-text-size-adjust: 100%; } main { max-width: 42rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; } h1, h2 { font-weight: 600; letter-spacing: -0.01em; } .cold-open { font-size: 2rem; line-height: 1.2; margin: 0 0 1rem; } .intro { color: var(--muted); margin: 0 0 2rem; } form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } form label { flex: 1 0 100%; font-size: 0.85rem; color: var(--muted); } input[type="text"] { flex: 1 1 18rem; padding: 0.6rem 0.7rem; font: inherit; color: var(--fg); background: transparent; border: 1px solid var(--rule); border-radius: 3px; } button { padding: 0.6rem 1.1rem; font: inherit; cursor: pointer; color: var(--bg); background: var(--fg); border: 1px solid var(--fg); border-radius: 3px; } .lines { list-style: none; margin: 0; padding: 0; } .line { /* A floor that keeps an individual row from resizing as its own content settles. It is not, and cannot be, a reservation for rows that do not exist yet — the page grows downward as lines land, and that IS the reveal. */ min-height: 3.2rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); /* VISIBLE BY DEFAULT. Do not put `opacity: 0` here. It was here, and it made the no-JS path render every finding invisible: `opacity: 0` is the animation START state, `.shown` is what clears it, and `.shown` is added by reveal.js. With scripting off nothing ever added it, so a successful lookup painted a blank area — while the no-match and rate-limit messages, which are

and have no opacity rule, rendered fine. Author-caught in Chrome and Firefox; every test was green, because the markup was present and presence is not visibility. The animated start state now belongs to `.js-reveal`, a class reveal.js puts on . So the default is "visible", and the animation is the enhancement that opts in — which is the only arrangement in which a scripting failure cannot hide content. */ transform: none; } /* The reveal engine is driving: lines start hidden and are cleared one at a time. */ .js-reveal .line { opacity: 0; transform: translateY(4px); transition: opacity 420ms ease, transform 420ms ease; } .js-reveal .line.shown { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal .line { transition: none; transform: none; } } .label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .value { display: block; font-size: 1.15rem; margin-top: 0.15rem; } /* data-weight is a three-way contract: lines.js sets it, both renderers emit it, and this rule is what makes it visible. Not #reveal-scoped, so it applies to the server-rendered noscript path too. */ .line[data-weight="major"] .value { font-size: 1.5rem; color: var(--accent); } .line[data-weight="minor"] .value { font-size: 1rem; color: var(--muted); } .note { font-size: 0.92rem; color: var(--muted); margin: 0.4rem 0 0; } .section { margin-top: 2.5rem; } .limits { border-top: 2px solid var(--rule); padding-top: 1.5rem; } .limits p { font-size: 0.95rem; color: var(--muted); } .skip { position: absolute; left: -9999px; padding: 0.5rem 0.9rem; background: var(--fg); color: var(--bg); } .skip:focus { left: 0.5rem; top: 0.5rem; z-index: 10; } footer { max-width: 42rem; margin: 0 auto; padding: 0 1.25rem 3rem; font-size: 0.85rem; color: var(--muted); } /* --- the offer. Quiet by design: one rule above it, nothing bold but the price and the button, and the same type as everything else. It should read as the next paragraph of the page rather than as an advertisement inserted into it. --- */ .offer { border-top: 2px solid var(--rule); padding-top: 1.5rem; } .offer-contents { margin: 0.75rem 0 1rem; padding-left: 1.1rem; } .offer-contents li { margin: 0.3rem 0; } .offer-action { margin: 1.4rem 0 1rem; } a.button { display: inline-block; padding: 0.7rem 1.2rem; color: var(--bg); background: var(--fg); border: 1px solid var(--fg); border-radius: 3px; text-decoration: none; } a.button:hover { opacity: 0.9; }