/* Shared stylesheet for the static guide pages under /guides. These are plain HTML on purpose: the app is a client-rendered SPA, so these are the only pages on the site whose words exist before any JavaScript runs — which is exactly what a crawler that does not execute JS (Bing, most AI crawlers) needs. Colours and type mirror the app's default look: the SKY0N theme (packages/core/src/themes.js, DEFAULT_THEME) under the Arcade layout, so a visitor who lands here from a search result and taps the call to action sees the same page they just left. The guides cannot read a visitor's saved theme (no JavaScript, no settings), so they hardcode the one every new visitor gets. Keep these in step with SKY0N: every value here is lifted from that theme, whose text roles clear WCAG AA on the page and on a panel (themes.contrast.test.js). SKY0N has two pinks on purpose — the link pink is dark enough to read as text on the pale page, and the button pink is the one whose white label clears 5:1 — hence --accent and --accent-fill. */ :root { --bg: #F0F7FF; /* appBg */ --panel: #ffffff; /* panel */ --border: #E8F0F8; /* border / divider */ --text: #1E2A3A; /* text */ --body: #3a5f93; /* body: running copy */ --muted: #4a6fa3; /* muted: ledes, captions, nav */ --accent: #b72b7d; /* accent: links, headings (4.5:1+ on --bg and --panel) */ --accent-fill: #da1d8c; /* accentBg: filled buttons, white label */ --on-accent: #ffffff; /* accentBgText */ --accent-soft: rgba(240, 143, 200, 0.2); /* accentSoft: hover tints */ --font-body: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 500 16px/1.7 var(--font-body); } header, main, footer { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; } header { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; } /* The wordmark is SKY0N's blue→pink gradient (themes.js `wordmark`). */ .brand { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.2em; text-decoration: none; font-size: 1.25rem; color: var(--accent); background: linear-gradient(90deg, #7b9ed4, #f08fc8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* The header's links only: the related-guides