/* BETR's whole stylesheet (B56, 2026-09-15: the terracotta and the paper). THE TYPE SYSTEM IS THE WHOLE SYSTEM. Founder, 2026-09-15: "too many font sizes… hard to know what's the title of the hope, what's the input label". So there are two voices and they never borrow each other's clothes: the person's words serif, on a paper card — the prediction, what happened. Never anything the app wrote. the app's words sans, on the orange — one bold question per screen, a line of explanation under it, and one big paper button. Plus one state label (LOCKED IN, small caps) and the three tags. That is all of it. System fonts only. A font request is a request, and "nothing is sent to us or anyone else" has to survive somebody opening the network tab (rule 1). Georgia and Iowan Old Style are on the phone already. Two rules B15 added, and both are cheap now and expensive later: 1. EVERY LAYOUT PROPERTY IS LOGICAL, not physical: `margin-inline-start`, never `margin-left`. The browser flips them when is rtl. i18n.test.js fails the build on a physical one. 2. EVERY FONT SIZE IS IN REM, never px, so a person who turned their text size up gets it. The canvas is drawn in px at 16px to the rem: 24px is 1.5rem, 17px is 1.0625rem. NO DARK MODE, ON PURPOSE (B56 §3). The orange is the ground in both, and a paper card is a paper card. lib/theme.js still writes data-theme onto ; nothing here reads it. CONTRAST, AND IT IS THE FOUNDER'S TO DECIDE (B56 §9, raised 2026-09-15). As the canvas draws them, paper on the orange is 4.25:1 and the pink explanation line is 2.65:1 — both under the 4.5:1 that small text needs. The canvas is built exactly as locked; every colour is a token below, so the answer is a one-line change. */ :root { color-scheme: light; --ground: #C4532E; --on-ground: #FFF6EE; --soft: #F2B9A4; --paper: #FFF6EE; --ink: #2B1A12; --printed: #8E7A70; /* The day label is 12px and bold; #8E7A70 is 3.8:1 on paper, so it is a shade darker. */ --day: #7A665C; --link: #93371A; --marker: #FFE58A; --marker-ink: #3A2E00; --sort-tag: #F2B9A4; --sort-ink: #3A1F14; --not-tag: #E8D5CC; --not-ink: #5C4033; --faded: rgba(255, 246, 238, .45); --lift: 0 18px 40px rgba(0, 0, 0, .15); --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: Georgia, "Iowan Old Style", "Times New Roman", serif; } * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; background: var(--ground); color: var(--on-ground); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--on-ground); outline-offset: 3px; } .paper :focus-visible, .sheet :focus-visible, .warn :focus-visible, .note :focus-visible { outline-color: var(--ground); } /* The heading focus lands on when the screen changes (B15). Nobody clicked it, so no ring. */ [tabindex="-1"]:focus { outline: none; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .arrow { display: inline-block; } [dir="rtl"] .arrow { transform: scaleX(-1); } /* ------------------------------------------------------------------ the frame */ .screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom); } /* The wordmark's row. Since 2026-09-16 it also carries the language, on the far side. */ .top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.625rem 1.625rem 0; } .wordmark { margin: 0; font-weight: 800; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; } /* The language (B16, founder's call): two grey letters and a small arrow, set like the LOCKED IN label so it reads as part of the frame rather than as a control asking for attention. The real