/* Wheelhouse site stylesheet -- generated by site/build.py from shared/css/tokens.css, base.css and www.css. Edit those. */ /* Design tokens, lifted from the product so the sites and the router UI are recognisably one thing. The values are the same RGB triples as ui/src/index.css: one violet accent for anything interactive, status colours reserved for state, two surface levels plus hairlines instead of stacked shadows. Theme resolution has three states, matching the toggle: - no stored choice -> follow prefers-color-scheme - data-theme="light" / "dark" on -> that choice wins in both directions, set by assets/js/theme.js before first paint. */ :root { --bg: 250 250 249; --surface: 255 255 255; --raised: 244 244 242; --sunken: 241 241 238; --line: 226 226 222; --line-strong: 208 208 203; --ink: 24 24 27; --muted: 88 88 94; --faint: 100 100 108; --accent: 79 70 229; --accent-soft: 238 238 255; --accent-ink: 255 255 255; --ok: 4 120 87; --warn: 180 83 9; --danger: 190 18 60; --info: 3 105 161; --shadow: 0 1px 2px rgb(24 24 27 / 0.05), 0 4px 16px -8px rgb(24 24 27 / 0.12); --shadow-lg: 0 4px 12px rgb(24 24 27 / 0.08), 0 24px 48px -24px rgb(24 24 27 / 0.25); --highlight: transparent; --sans: 'Inter var', Inter, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'DejaVu Sans Mono', monospace; --radius: 8px; --radius-sm: 5px; --measure: 74ch; --sidebar-w: 16.5rem; --aside-w: 15rem; --bar-h: 3.5rem; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: 9 9 13; --surface: 20 20 26; --raised: 28 28 36; --sunken: 14 14 19; --line: 39 39 49; --line-strong: 55 55 68; --ink: 240 240 245; --muted: 160 160 176; --faint: 138 138 154; --accent: 139 138 250; --accent-soft: 32 30 62; --accent-ink: 12 12 20; --ok: 52 211 153; --warn: 251 191 36; --danger: 251 113 133; --info: 56 189 248; --shadow: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-lg: 0 16px 48px -12px rgb(0 0 0 / 0.7); --highlight: rgb(255 255 255 / 0.045); color-scheme: dark; } } :root[data-theme='dark'] { --bg: 9 9 13; --surface: 20 20 26; --raised: 28 28 36; --sunken: 14 14 19; --line: 39 39 49; --line-strong: 55 55 68; --ink: 240 240 245; --muted: 160 160 176; --faint: 138 138 154; --accent: 139 138 250; --accent-soft: 32 30 62; --accent-ink: 12 12 20; --ok: 52 211 153; --warn: 251 191 36; --danger: 251 113 133; --info: 56 189 248; --shadow: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-lg: 0 16px 48px -12px rgb(0 0 0 / 0.7); --highlight: rgb(255 255 255 / 0.045); color-scheme: dark; } /* Inter, self-hosted. The router has no guaranteed egress and neither should a documentation site: a font from a third party is a third party watching every reader. Licence: shared/fonts/inter-OFL.txt. */ @font-face { font-family: 'Inter var'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-var-latin.woff2') format('woff2'); } /* Everything both sites share: reset, chrome, prose, admonitions, search. */ *, *::before, *::after { box-sizing: border-box; } html { background: rgb(var(--bg)); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--sans); font-size: 15px; line-height: 1.65; color: rgb(var(--ink)); background: rgb(var(--bg)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: rgb(var(--accent)); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: rgb(var(--accent) / 0.4); } a:hover { text-decoration-color: rgb(var(--accent)); } :focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: 0.5rem; top: -3rem; z-index: 60; padding: 0.5rem 0.85rem; border-radius: var(--radius-sm); background: rgb(var(--accent)); color: rgb(var(--accent-ink)); text-decoration: none; transition: top 0.12s ease; } .skip:focus { top: 0.5rem; } /* ---------------------------------------------------------------- top bar */ .topbar { position: sticky; top: 0; z-index: 40; background: rgb(var(--surface) / 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgb(var(--line)); } .bar { display: flex; align-items: center; gap: 1rem; height: var(--bar-h); max-width: 90rem; margin: 0 auto; padding: 0 1.25rem; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: rgb(var(--ink)); flex: none; } .brand .mark { width: 22px; height: 22px; color: rgb(var(--accent)); flex: none; } .brand-name { font-weight: 600; letter-spacing: -0.011em; font-size: 15px; } .brand-suffix { font-size: 12px; color: rgb(var(--faint)); border-left: 1px solid rgb(var(--line-strong)); padding-left: 0.5rem; margin-left: 0.1rem; } .brand-suffix:empty { display: none; } .topnav { display: flex; gap: 0.25rem; min-width: 0; overflow-x: auto; scrollbar-width: none; } .topnav::-webkit-scrollbar { display: none; } .topnav a { padding: 0.35rem 0.6rem; border-radius: var(--radius-sm); color: rgb(var(--muted)); text-decoration: none; font-size: 14px; white-space: nowrap; } .topnav a:hover { color: rgb(var(--ink)); background: rgb(var(--raised)); } .topnav a[aria-current='page'] { color: rgb(var(--ink)); font-weight: 550; background: rgb(var(--accent-soft)); } .bar-end { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex: none; } .header-links { display: flex; gap: 0.15rem; } .header-links .hl { font-size: 13px; color: rgb(var(--muted)); text-decoration: none; padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); white-space: nowrap; } .header-links .hl:hover { color: rgb(var(--ink)); background: rgb(var(--raised)); } .theme-toggle, .nav-toggle { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 32px; padding: 0 0.5rem; border: 1px solid rgb(var(--line)); border-radius: var(--radius-sm); background: rgb(var(--surface)); color: rgb(var(--muted)); font: inherit; font-size: 14px; cursor: pointer; } .theme-toggle:hover, .nav-toggle:hover { color: rgb(var(--ink)); border-color: rgb(var(--line-strong)); } .ti-moon { display: none; } :root[data-theme='dark'] .ti-sun { display: none; } :root[data-theme='dark'] .ti-moon { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ti-sun { display: none; } :root:not([data-theme='light']) .ti-moon { display: inline; } } /* ----------------------------------------------------------------- search */ .search { position: relative; } .search input { width: 15rem; max-width: 34vw; height: 32px; padding: 0 0.6rem; font: inherit; font-size: 13px; color: rgb(var(--ink)); background: rgb(var(--sunken)); border: 1px solid rgb(var(--line)); border-radius: var(--radius-sm); } .search input::placeholder { color: rgb(var(--faint)); } .search input:disabled { opacity: 0.6; cursor: not-allowed; } .search-note { display: block; font-size: 12px; color: rgb(var(--faint)); max-width: 15rem; } .search-results { position: absolute; right: 0; top: calc(100% + 6px); width: min(30rem, 92vw); max-height: min(70vh, 34rem); overflow-y: auto; background: rgb(var(--surface)); border: 1px solid rgb(var(--line-strong)); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0.35rem; z-index: 50; } .search-results .sr { display: block; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); text-decoration: none; color: inherit; } .search-results .sr:hover, .search-results .sr[aria-selected='true'] { background: rgb(var(--accent-soft)); } .search-results .sr-title { display: block; font-weight: 550; font-size: 14px; color: rgb(var(--ink)); } .search-results .sr-path { display: block; font-family: var(--mono); font-size: 11px; color: rgb(var(--faint)); } .search-results .sr-snip { display: block; font-size: 12.5px; color: rgb(var(--muted)); margin-top: 0.15rem; } .search-results .sr-empty { padding: 0.75rem 0.6rem; font-size: 13px; color: rgb(var(--muted)); } .search-results mark { background: rgb(var(--accent) / 0.18); color: inherit; border-radius: 2px; } /* ------------------------------------------------------------------ shell */ .shell { flex: 1 0 auto; width: 100%; max-width: 90rem; margin: 0 auto; padding: 0 1.25rem; display: grid; gap: 2.5rem; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--aside-w); align-items: start; } body.no-sidebar .shell { grid-template-columns: minmax(0, 1fr) var(--aside-w); } body.no-sidebar.no-toc .shell { grid-template-columns: minmax(0, 1fr); } body.no-toc:not(.no-sidebar) .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } body.no-sidebar .sidebar, body.no-toc .aside { display: none; } .content { min-width: 0; padding: 2rem 0 3rem; } .content:focus { outline: none; } .aside { position: sticky; top: calc(var(--bar-h) + 1.5rem); padding-top: 2rem; max-height: calc(100vh - var(--bar-h) - 3rem); overflow-y: auto; } /* --------------------------------------------------------------- sidebar */ .sidebar { position: sticky; top: var(--bar-h); padding: 1.75rem 0 2rem; max-height: calc(100vh - var(--bar-h)); overflow-y: auto; border-right: 1px solid rgb(var(--line)); margin-right: -1.25rem; padding-right: 1.25rem; } .nav-tree, .nav-sub { list-style: none; margin: 0; padding: 0; } .nav-sub { margin-left: 0.7rem; padding-left: 0.55rem; border-left: 1px solid rgb(var(--line)); } .sidebar li > a, .sidebar .nav-group { display: block; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.45; color: rgb(var(--muted)); text-decoration: none; } .sidebar > .nav-tree > li > a, .sidebar > .nav-tree > li > .nav-group { font-weight: 600; color: rgb(var(--ink)); font-size: 13px; letter-spacing: 0.01em; margin-top: 1rem; } .sidebar > .nav-tree > li:first-child > a { margin-top: 0; } .sidebar li > a:hover { color: rgb(var(--ink)); background: rgb(var(--raised)); } .sidebar li.current > a { color: rgb(var(--accent)); background: rgb(var(--accent-soft)); font-weight: 550; } .sidebar .nav-group { cursor: default; } /* --------------------------------------------------------------- content */ .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: 12.5px; color: rgb(var(--faint)); } .breadcrumbs li + li::before { content: '/'; margin-right: 0.3rem; color: rgb(var(--line-strong)); } .breadcrumbs a { color: rgb(var(--muted)); text-decoration: none; } .breadcrumbs a:hover { color: rgb(var(--accent)); text-decoration: underline; } .prose { max-width: var(--measure); } .prose > *:first-child { margin-top: 0; } .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { line-height: 1.25; letter-spacing: -0.015em; scroll-margin-top: calc(var(--bar-h) + 1rem); position: relative; } .prose h1 { font-size: 2rem; font-weight: 680; margin: 0 0 0.75rem; } .prose h2 { font-size: 1.4rem; font-weight: 640; margin: 2.75rem 0 0.75rem; padding-bottom: 0.35rem; border-bottom: 1px solid rgb(var(--line)); } .prose h3 { font-size: 1.12rem; font-weight: 620; margin: 2rem 0 0.5rem; } .prose h4 { font-size: 1rem; font-weight: 620; margin: 1.5rem 0 0.4rem; } .prose h5, .prose h6 { font-size: 0.9rem; font-weight: 620; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(var(--muted)); margin: 1.4rem 0 0.35rem; } .hanchor { margin-left: 0.4rem; color: rgb(var(--line-strong)); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity 0.1s ease; } h1:hover .hanchor, h2:hover .hanchor, h3:hover .hanchor, h4:hover .hanchor, h5:hover .hanchor, h6:hover .hanchor, .hanchor:focus-visible { opacity: 1; } .hanchor:hover { color: rgb(var(--accent)); } .prose p { margin: 0 0 1rem; } .prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.35rem; } .prose li { margin: 0.28rem 0; } .prose li > ul, .prose li > ol { margin: 0.28rem 0 0.4rem; } .prose strong { font-weight: 620; color: rgb(var(--ink)); } .prose code { font-family: var(--mono); font-size: 0.855em; background: rgb(var(--sunken)); border: 1px solid rgb(var(--line)); border-radius: 4px; padding: 0.08em 0.32em; word-break: break-word; } .prose a code { color: inherit; } .prose hr { border: 0; border-top: 1px solid rgb(var(--line)); margin: 2.5rem 0; } .prose img { max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid rgb(var(--line)); } .prose img.bare { border: 0; } .prose blockquote { margin: 0 0 1rem; padding: 0.15rem 0 0.15rem 1rem; border-left: 3px solid rgb(var(--line-strong)); color: rgb(var(--muted)); } .prose blockquote > *:last-child { margin-bottom: 0; } /* ------------------------------------------------------------ code blocks */ .code-block { margin: 0 0 1.25rem; border: 1px solid rgb(var(--line)); border-radius: var(--radius); background: rgb(var(--sunken)); overflow: hidden; box-shadow: inset 0 1px 0 0 var(--highlight); } .code-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2rem; padding: 0.15rem 0.4rem 0.15rem 0.8rem; border-bottom: 1px solid rgb(var(--line)); background: rgb(var(--raised)); } /* No language and no title: no bar. The copy button floats over the corner instead of introducing an empty grey strip. */ .code-block { position: relative; } .code-head.bare { position: absolute; top: 0.3rem; right: 0.4rem; min-height: 0; padding: 0; border: 0; background: none; z-index: 1; } .code-label { font-family: var(--mono); font-size: 11px; color: rgb(var(--faint)); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .code-block .copy { font: inherit; font-size: 11.5px; color: rgb(var(--muted)); background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--radius-sm); padding: 0.1rem 0.45rem; cursor: pointer; flex: none; margin-left: auto; } .code-block .copy:hover { color: rgb(var(--ink)); border-color: rgb(var(--line-strong)); } .code-block .copy[data-done='1'] { color: rgb(var(--ok)); border-color: rgb(var(--ok) / 0.5); } .code-block pre { margin: 0; padding: 0.8rem 0.9rem; overflow-x: auto; } .code-block code { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; background: none; border: 0; padding: 0; color: rgb(var(--ink)); white-space: pre; word-break: normal; } /* ---------------------------------------------------------------- tables */ .table-wrap { overflow-x: auto; margin: 0 0 1.25rem; border: 1px solid rgb(var(--line)); border-radius: var(--radius); } .prose table { border-collapse: collapse; width: 100%; font-size: 13.5px; } .prose th, .prose td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid rgb(var(--line)); vertical-align: top; } .prose th { background: rgb(var(--raised)); font-weight: 620; font-size: 12.5px; letter-spacing: 0.01em; white-space: nowrap; } .prose tbody tr:last-child td { border-bottom: 0; } .ta-right { text-align: right; } .ta-center { text-align: center; } /* ----------------------------------------------------------- admonitions */ .admonition { margin: 0 0 1.25rem; padding: 0.85rem 1rem; border: 1px solid rgb(var(--line)); border-left: 3px solid rgb(var(--faint)); border-radius: var(--radius); background: rgb(var(--surface)); } .admonition > *:last-child { margin-bottom: 0; } .adm-title { margin: 0 0 0.35rem; font-weight: 620; font-size: 13px; letter-spacing: 0.01em; text-transform: uppercase; } .adm-note { border-left-color: rgb(var(--info)); } .adm-note .adm-title { color: rgb(var(--info)); } .adm-tip { border-left-color: rgb(var(--ok)); } .adm-tip .adm-title { color: rgb(var(--ok)); } .adm-warning { border-left-color: rgb(var(--warn)); } .adm-warning .adm-title { color: rgb(var(--warn)); } .adm-danger { border-left-color: rgb(var(--danger)); } .adm-danger .adm-title { color: rgb(var(--danger)); } .adm-roadmap { border-left-color: rgb(var(--line-strong)); background: rgb(var(--sunken)); } .adm-roadmap .adm-title { color: rgb(var(--faint)); } /* A platform gap is structural, not a fault or a hazard: the accent, so it reads as "here is how the machine actually works" rather than as a warning about upstream. */ .adm-gap { border-left-color: rgb(var(--accent)); background: rgb(var(--accent-soft)); } .adm-gap .adm-title { color: rgb(var(--accent)); } /* -------------------------------------------------------- table of contents */ .toc { font-size: 13px; border-left: 1px solid rgb(var(--line)); padding-left: 0.9rem; } .toc-title { margin: 0 0 0.5rem; font-size: 11.5px; font-weight: 620; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--faint)); } .toc ul { list-style: none; margin: 0; padding: 0; } .toc li { margin: 0.1rem 0; } .toc a { display: block; padding: 0.12rem 0; color: rgb(var(--muted)); text-decoration: none; line-height: 1.4; } .toc a:hover { color: rgb(var(--ink)); } .toc a.active { color: rgb(var(--accent)); font-weight: 550; } .toc .toc-3 a { padding-left: 0.8rem; font-size: 12.5px; } /* ----------------------------------------------------- page foot, prev/next */ .page-meta { margin: 2rem 0 0; font-size: 12.5px; color: rgb(var(--faint)); display: flex; flex-wrap: wrap; gap: 0.75rem; } .tag { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 0.05rem 0.35rem; border: 1px solid rgb(var(--line)); border-radius: 999px; margin-right: 0.25rem; color: rgb(var(--muted)); } .page-foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgb(var(--line)); font-size: 13px; } .page-foot .edit { color: rgb(var(--muted)); text-decoration: none; } .page-foot .edit:hover { color: rgb(var(--accent)); text-decoration: underline; } .prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.5rem; } .pn { display: block; padding: 0.7rem 0.9rem; border: 1px solid rgb(var(--line)); border-radius: var(--radius); text-decoration: none; background: rgb(var(--surface)); } .pn:hover { border-color: rgb(var(--accent) / 0.6); } .pn.next { grid-column: 2; text-align: right; } .pn-label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--faint)); } .pn-title { display: block; font-size: 14px; font-weight: 550; color: rgb(var(--ink)); } /* ----------------------------------------------------------------- footer */ .sitefoot { flex: none; border-top: 1px solid rgb(var(--line)); background: rgb(var(--surface)); margin-top: 2rem; } .foot-inner { max-width: 90rem; margin: 0 auto; padding: 1.75rem 1.25rem 2.25rem; font-size: 13px; color: rgb(var(--muted)); } .foot-links { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 0.9rem; } .foot-links a { color: rgb(var(--muted)); text-decoration: none; } .foot-links a:hover { color: rgb(var(--accent)); text-decoration: underline; } .attribution { margin: 0 0 0.6rem; max-width: 62rem; color: rgb(var(--faint)); font-size: 12.5px; line-height: 1.6; } .attribution code { font-family: var(--mono); font-size: 0.9em; } .buildinfo { margin: 0; font-size: 12px; color: rgb(var(--faint)); } .buildinfo code { font-family: var(--mono); } .buildinfo a { color: inherit; text-decoration-color: rgb(var(--line-strong)); } .buildinfo a:hover { color: rgb(var(--accent)); } /* ------------------------------------------------------------- responsive */ @media (max-width: 1180px) { .shell, body.no-sidebar .shell, body.no-toc:not(.no-sidebar) .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } body.no-sidebar .shell, body.no-sidebar.no-toc .shell { grid-template-columns: minmax(0, 1fr); } .aside { display: none; } } /* The nav toggle only exists if JavaScript can operate it. theme.js puts the `js` class on before first paint; without it the narrow layout keeps the whole navigation tree on the page, above the article, where it is readable and keyboard-navigable with no script at all. */ .nav-toggle { display: none; } @media (max-width: 860px) { .shell, body.no-sidebar .shell, body.no-toc:not(.no-sidebar) .shell { grid-template-columns: minmax(0, 1fr); gap: 0; } .sidebar { position: static; max-height: none; border-right: 0; border-bottom: 1px solid rgb(var(--line)); margin-right: 0; padding: 1rem 0; } :root.js .nav-toggle { display: inline-flex; } /* ...but not on a page with no tree to open. The sales site's sections are in the top bar, its sidebar is empty, and a Menu button that expands an empty strip and reports aria-expanded="true" is a control that lies. */ :root.js body.no-sidebar .nav-toggle { display: none; } :root.js .sidebar { display: none; } :root.js .sidebar.open { display: block; } .header-links { display: none; } .search input { width: 9rem; } .prevnext { grid-template-columns: 1fr; } .pn.next { grid-column: 1; } } /* Sales site: the same tokens, more room. Wider measure, larger type, more space around headings. No new colours and no new gestures -- if the wiki and the product UI are a console, this is the same console with the panels further apart. */ body.site-www { font-size: 16px; line-height: 1.68; } body.site-www .shell { max-width: 68rem; } body.site-www .content { padding: 3rem 0 4rem; } /* No sidebar and no dense reference tree, so the column is centred rather than pinned left. Everything in the article column shares the same measure so the breadcrumbs, the footer row and the prev/next pair line up with the text. */ body.site-www .prose, body.site-www .breadcrumbs, body.site-www .page-meta, body.site-www .page-foot, body.site-www .prevnext { max-width: 68ch; margin-left: auto; margin-right: auto; width: 100%; } body.site-www .prose h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 1rem; } body.site-www .prose h2 { font-size: 1.6rem; margin-top: 3.5rem; border-bottom: 0; padding-bottom: 0; } body.site-www .prose h3 { font-size: 1.2rem; margin-top: 2.25rem; } body.site-www .prose p { margin-bottom: 1.15rem; } /* The opening paragraph of any page is the promise; set it larger. */ body.site-www .prose > h1 + p { font-size: 1.2rem; line-height: 1.55; color: rgb(var(--muted)); margin-bottom: 2rem; } body.site-www .prose li { margin: 0.45rem 0; } /* ------------------------------------------------------------- home layout */ body.site-www.layout-home .prose { max-width: 74ch; } body.layout-home .prose > h1 { font-size: 3rem; line-height: 1.08; margin-top: 1.5rem; } @media (max-width: 700px) { body.layout-home .prose > h1 { font-size: 2.1rem; } body.site-www .prose h1 { font-size: 1.9rem; } } body.layout-home .prose > h1 + p { font-size: 1.3rem; line-height: 1.5; max-width: 46ch; } /* --------------------------------------------------------------- buttons */ .prose a.button, .prose a.button-secondary { display: inline-block; margin: 0 0.5rem 0.5rem 0; padding: 0.6rem 1.15rem; border-radius: var(--radius); font-size: 15px; font-weight: 560; text-decoration: none; border: 1px solid transparent; } .prose a.button { background: rgb(var(--accent)); color: rgb(var(--accent-ink)); } .prose a.button:hover { background: rgb(var(--accent) / 0.88); } .prose a.button-secondary { border-color: rgb(var(--line-strong)); color: rgb(var(--ink)); background: rgb(var(--surface)); } .prose a.button-secondary:hover { border-color: rgb(var(--accent)); color: rgb(var(--accent)); } /* A paragraph that holds only buttons gets its own breathing room. */ body.site-www .prose p:has(> a.button:first-child) { margin: 1.75rem 0 2rem; } /* --------------------------------------------------------------- density */ body.site-www .code-block { margin-bottom: 1.75rem; } body.site-www .prose table { font-size: 14px; } body.site-www .admonition { margin-bottom: 1.75rem; }