/* Safata — one stylesheet for every page. Same origin, no build, no JS. 2026-08-15 redesign: the product is the imagery. A light typeset page whose only pictures are the app's own windows, in the app's own DEFAULT theme — Cobalt (rec 200; packages/desktop/src/themes.ts): white content under an indigo chrome rail, cobalt accent. The page wears the same palette, so site and product are one object. Since rec 505 (2026-09-19) the windows are screencaptures of recorded runs (site/cases/), not drawings: the stylesheet frames them and sets the receipt under them, and draws no window of its own. Type constitution: serif claims (Newsreader), sans explains (the platform's own UI face — a native app's site set in the native face), mono proves (machine truth only). */ :root{ /* the app's Cobalt theme, verbatim (themes.ts) */ --bg:#ffffff; --panel:#f5f8fd; --panel-2:#e9f0fa; --ink:#1b2333; --muted:#586377; --faint:#687791; /* --faint on the two tinted panels measures 4.26:1 and 3.95:1 — under AA's 4.5 at the 10.5–11.5px the drawn windows set their footers and titles in. One shade darker for those contexts (4.76:1 on --panel-2, 5.13:1 on --panel), no visible change in register. The app's own token stays --faint everywhere it sits on white. */ --faint-panel:#5c6a83; --rule:#e1e8f1; --rule-strong:#cfdae8; --accent:#1d63eb; --accent-ink:#ffffff; --ok:#237650; --err:#c43b2f; --warn:#956216; --chrome-bg:#363c60; --chrome-ink:#e9ecf7; --chrome-muted:#b0b7d3; --chrome-faint:#a3a8c1; --chrome-rule:rgba(255,255,255,0.09); --chrome-hover:#434a72; /* faces */ --serif:'Newsreader',Georgia,serif; --sans:system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --app-mono:ui-monospace,'SF Mono',Menlo,Consolas,'IBM Plex Mono',monospace; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; } .mono{font-family:var(--mono)} a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--rule-strong)} a:hover{text-decoration-color:var(--ink)} a:focus-visible{outline:2px solid var(--accent);outline-offset:3px} img{max-width:100%;height:auto;display:block} /* One shell, five pages: a wide page with a reading measure inside it. Prose never exceeds the measure; only windows use the full width. */ .page{max-width:72rem;margin:0 auto;padding:0 1.5rem} /* Inner pages are reading matter: the READING COLUMN narrows to the measure and centres, the way a typeset page should — but the shell (header, footer) keeps the wide measure on every page, so the wordmark and the nav do not move when a visitor clicks Product → Questions. It used to be `.page.narrow` on the whole page, which was two shells on glass: the wordmark sat at x=168 on the homepage and x=376 on the FAQ at 1440. Only the pages with frames on them run their content wide — the case files and the product page. */ .reading{max-width:46rem;margin:0 auto} /* Header ------------------------------------------------------------- */ header{ display:flex;justify-content:space-between;align-items:center; gap:.75rem 1.5rem;flex-wrap:wrap; padding:1.125rem 0; } .wordmark{font-family:var(--mono);font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:lowercase;text-decoration:none} header nav{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center} /* `.35rem 0` of padding lifts an 18px link to the 24px WCAG 2.2 target minimum without moving the row — on a phone these are the only nav. */ header nav a{font-family:var(--mono);font-size:.71875rem;color:var(--faint);text-decoration:none;white-space:nowrap;padding:.35rem 0} header nav a:hover{color:var(--ink)} header nav a[aria-current="page"]{color:var(--ink)} /* The one persistent call to action — outside the