/* Theme tokens for the whole site. Loaded before every other stylesheet. Light is the default. Dark is pure black, by decision. Three states: an explicit choice stamps data-theme on ; with no choice the system preference decides. Every token is defined on bare :root first, so nothing depends on a media query having matched. */ :root{ color-scheme:light; --paper:#fff; --ink:#101113; --muted:#62636b; --line:#e7e8ed; --soft:#f6f7fa; --blue:#244bc3; --blue-soft:#eaf0ff; --lilac:#ede9f7; --peach:#f8e4d8; --green:#e9f0e9; /* translucent grounds: sticky headers and bars */ --veil:rgb(255 255 255 / .94); --veil-soft:rgb(255 255 255 / .88); --scrim:rgb(5 15 46 / .36); --on-art:rgb(255 255 255 / .9); --on-art-strong:#fff; /* never flips: the artwork does not */ --on-art-ink:#101113; /* for the pale part of an artwork panel */ /* notes inside a guide */ --note-edge:var(--blue); --note-bg:var(--blue-soft); --note-ink:#1e2b4d; --note-body:#3a4560; --warn-edge:#b5493a; --warn-bg:var(--peach); --warn-ink:#4e231b; --warn-body:#6d3227; --shadow-card:0 16px 40px rgb(16 17 19 / .16); --shadow-lift:0 18px 50px rgb(20 35 70 / .09); /* The homepage used to run its own slightly different values. They are the same tokens now, which is what the brand file says they should be. */ --sc-canvas:var(--paper); --sc-surface:var(--soft); --sc-ink:var(--ink); --sc-ink-soft:var(--muted); --sc-accent:var(--blue); --sc-accent-ink:var(--paper); } /* System preference, only when the reader has not chosen. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --paper:#000; --ink:#f5f5f7; --muted:#9b9ba1; --line:#26262a; --soft:#141417; --blue:#7c9aff; --blue-soft:#131a2c; --lilac:#1a1726; --peach:#2b1c15; --green:#121b16; --veil:rgb(0 0 0 / .92); --veil-soft:rgb(0 0 0 / .86); --scrim:rgb(0 0 0 / .5); --note-ink:#cdd9ff; --note-body:#a9b8e0; --warn-edge:#e08a70; --warn-ink:#ffd9cc; --warn-body:#e3b6a7; --shadow-card:0 16px 40px rgb(0 0 0 / .55); --shadow-lift:0 18px 50px rgb(0 0 0 / .5); } } /* An explicit choice wins in both directions. */ :root[data-theme="dark"]{ color-scheme:dark; --paper:#000; --ink:#f5f5f7; --muted:#9b9ba1; --line:#26262a; --soft:#141417; --blue:#7c9aff; --blue-soft:#131a2c; --lilac:#1a1726; --peach:#2b1c15; --green:#121b16; --veil:rgb(0 0 0 / .92); --veil-soft:rgb(0 0 0 / .86); --scrim:rgb(0 0 0 / .5); --note-ink:#cdd9ff; --note-body:#a9b8e0; --warn-edge:#e08a70; --warn-ink:#ffd9cc; --warn-body:#e3b6a7; --shadow-card:0 16px 40px rgb(0 0 0 / .55); --shadow-lift:0 18px 50px rgb(0 0 0 / .5); } /* The wordmark is supplied in warm grey and forced to the ink colour. On black it has to go the other way, so this is the one place a filter is correct. The homepage stamps the same G into three of its own objects, which sit on var(--paper) and so disappear on black unless they flip with it. */ :root[data-theme="dark"] .brand img, :root[data-theme="dark"] .logo img, :root[data-theme="dark"] .brain-object img, :root[data-theme="dark"] .empty-page.front img, :root[data-theme="dark"] .process-hub img{filter:brightness(0) invert(1)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brand img, :root:not([data-theme="light"]) .logo img, :root:not([data-theme="light"]) .brain-object img, :root:not([data-theme="light"]) .empty-page.front img, :root:not([data-theme="light"]) .process-hub img{filter:brightness(0) invert(1)} } /* ---------- the toggle ---------- */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:100px; background:transparent;color:var(--ink);cursor:pointer;padding:0; transition:background .2s,border-color .2s} .theme-toggle:hover{background:var(--soft)} .theme-toggle svg{width:18px;height:18px} .theme-toggle .moon{display:none} :root[data-theme="dark"] .theme-toggle .moon{display:block} :root[data-theme="dark"] .theme-toggle .sun{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-toggle .moon{display:block} :root:not([data-theme="light"]) .theme-toggle .sun{display:none} } /* ---------- resource colourways ---------- Identity for a piece of content, not interface colour. Blue stays the interface accent for progress, focus and state. These appear on a tile and nowhere else, so a row of resources reads as six different things. They do not change between light and dark: the tile carries its own ground. */ .cw-blue {--c1:#3b5bdb;--c2:#7048e8;--c3:#4dabf7;--c4:#e8f0ff} .cw-green {--c1:#0ca678;--c2:#40c057;--c3:#1098ad;--c4:#e6fcf5} .cw-violet {--c1:#7048e8;--c2:#d6336c;--c3:#4c6ef5;--c4:#f3e8ff} .cw-bronze {--c1:#b8860b;--c2:#e8a33d;--c3:#8b5e1a;--c4:#fff4dc} .cw-crimson{--c1:#c2255c;--c2:#e8590c;--c3:#a61e4d;--c4:#ffe8d9} .cw-cyan {--c1:#1098ad;--c2:#22b8cf;--c3:#1c7ed6;--c4:#e3fafc} /* The tile. Colour is the whole surface, with the mark held in the middle. The gradient is already feathered; the blur only softens the seams, so it stays small enough not to cost a heavy compositing layer per tile. */ .tile-art{position:relative;overflow:hidden;isolation:isolate;background:var(--c1)} .tile-art::before{content:"";position:absolute;inset:-18%; background: radial-gradient(78% 72% at 22% 16%, var(--c2) 0%, transparent 64%), radial-gradient(86% 80% at 84% 34%, var(--c3) 0%, transparent 68%), radial-gradient(92% 86% at 44% 96%, var(--c4) 0%, transparent 72%), radial-gradient(70% 64% at 92% 92%, var(--c2) 0%, transparent 62%), linear-gradient(148deg, var(--c1) 0%, var(--c3) 100%); filter:blur(22px)} .tile-mark{position:absolute;left:50%;top:50%;translate:-50% -50%; width:28%;max-width:120px;min-width:44px;color:#fff;opacity:.94;z-index:2; filter:drop-shadow(0 8px 26px rgb(0 0 0 / .28))} @media(prefers-reduced-motion:reduce){.tile-art::before{filter:none}} /* ---------- holding the page still ---------- On a phone the page is locked on the horizontal axis. There is nothing to the left or right of any page here, so rubber-banding sideways communicates nothing: it just reads as the page coming loose from the screen. Vertical bounce is left alone, because that axis genuinely has somewhere to go. */ html{ overscroll-behavior-x:none; /* iOS inflates text in landscape without this, which reflows the layout under the reader's thumb. */ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ /* clip rather than hidden: clip does not create a scroll container, so position:sticky still resolves against the viewport. */ overflow-x:clip; max-width:100%; } /* Any deliberate sideways strip keeps its own overscroll to itself, so reaching the end of a row never nudges the page behind it. */ [class*="-rail"] ol,.covers,.gd-tiles{overscroll-behavior-x:contain} /* Touch targets: nothing interactive smaller than a fingertip. */ @media(pointer:coarse){ .theme-toggle,.menu-toggle,.button,.text-link,.gd-mark,.gd-copy{min-height:44px} }