/* ============================================================ Dream-RSI project page Three voices, and nothing may speak out of turn: interface Google Sans Flex — nav, headings, buttons, chrome prose Literata — leads, abstract, captions only machine Google Sans Code — eyebrows, labels, numbers, code Light is the default; dark is a toggle on , not a media query, so the choice is the reader's and it persists. ============================================================ */ :root, [data-theme="light"] { --bg0:#FFFFFF; --bg1:#FAFAFB; --bg2:#F6F7F9; --panel:#FFFFFF; --line:#E9EAEE; --line-2:#D7DAE0; --ink:#24292F; --ink-2:#4B5158; --ink-3:#6A7079; /* 6A7079 clears 4.5:1 on the tinted panels too; 6F767F was 4.40 */ --env:#3273DC; --env-deep:#2456B0; /* accent: paid / online */ --mid:#7A52C7; --mid-deep:#5E3AA8; /* second: imagined / free */ --warm:#B5701F; --onenv:#FFFFFF; --hud-bg:rgba(255,255,255,.88); --shadow:0 1px 3px rgba(15,20,30,.05); --canvas-ink:34,41,47; --canvas-paper:255,255,255; } [data-theme="dark"] { --bg0:#0D1117; --bg1:#11161D; --bg2:#161B22; --panel:#141A21; --line:#262C36; --line-2:#39414D; --ink:#E6EDF3; --ink-2:#A8B3BF; --ink-3:#7D8794; --env:#79A8F5; --env-deep:#4E7FD0; --mid:#9E86E8; --mid-deep:#7C63C9; --warm:#EFA75B; --onenv:#0B1020; --hud-bg:rgba(13,17,23,.86); --shadow:0 1px 3px rgba(0,0,0,.4); --canvas-ink:230,237,243; --canvas-paper:13,17,23; } :root { --env-ghost: color-mix(in srgb, var(--env) 9%, transparent); --env-line: color-mix(in srgb, var(--env) 55%, transparent); --mid-ghost: color-mix(in srgb, var(--mid) 10%, transparent); --display:'Google Sans Flex','Google Sans','Noto Sans',system-ui,-apple-system,sans-serif; --sans:var(--display); --read:'Literata','Noto Serif',Georgia,'Times New Roman',serif; --mono:'Google Sans Code','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --measure:800px; --ease:cubic-bezier(.2,.7,.3,1); --t-base:.24s; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { background: var(--bg0); color: var(--ink); font-family: var(--sans); font-size: 16.5px; line-height: 1.7; font-optical-sizing: auto; font-synthesis-weight: none; overflow-x: hidden; transition: background-color .35s, color .35s; } img, svg, video, canvas { max-width: 100%; display: block; } img { height: auto; } a { color: var(--env); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: color-mix(in srgb, var(--env) 18%, transparent); } code { font-family: var(--mono); font-size: .86em; letter-spacing: -.005em; background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 1.5px 6px; color: var(--ink); } a:focus-visible, button:focus-visible { outline: 2px solid var(--env); outline-offset: 2px; border-radius: 6px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--bg0); padding: .7rem 1.1rem; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ============================================================ HUD NAV ============================================================ */ .hud { position: fixed; top: 0; left: 0; right: 0; z-index: 90; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; } .hud.scrolled { background: var(--bg0); box-shadow: 0 1px 0 var(--line); } .hud-in { max-width: 1240px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 26px; } .wordmark { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .01em; color: var(--ink); display: flex; align-items: center; gap: 9px; text-decoration: none; } .wordmark:hover { text-decoration: none; } .wordmark .mark { width: 23px; height: 23px; flex: none; color: var(--env); } .hud nav { display: flex; gap: 22px; margin-left: auto; align-items: center; } .hud nav a { position: relative; font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; color: var(--ink-2); } .hud nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--env); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease); } .hud nav a:hover { color: var(--env); text-decoration: none; } .hud nav a:hover::after, .hud nav a.is-active::after { transform: scaleX(1); } .hud nav a.is-active { color: var(--ink); } .navbtn, .tbtn { /* an inherits body's 1.7 leading, a