/* The suite's look (crates/suite-ui theme.rs): square, 1px lines, one accent. */
:root {
  --window: #f4f4f0; --chrome: #ebebe6; --panel: #fafaf7; --line: #c2c2ba;
  --text: #1c1c18; --muted: #6e6e66; --accent: #3d5a80;
}
@media (prefers-color-scheme: dark) {
  :root { --window: #1d1d1b; --chrome: #252523; --panel: #222220; --line: #3c3c38; --text: #e6e6e0; --muted: #9a9a92; --accent: #8fb0d8; }
}
* { box-sizing: border-box; }
html { background: var(--window); color: var(--text); }
body { margin: 0; font: 16px/1.6 "IBM Plex Sans", system-ui, sans-serif; }
header { border-bottom: 1px solid var(--line); background: var(--chrome); }
header .in, main, footer .in { max-width: 720px; margin: 0 auto; padding: 0 24px; }
header .in { display: flex; align-items: center; gap: 12px; height: 56px; }
header img { width: 28px; height: 28px; }
header a.name { font-weight: 600; color: var(--text); text-decoration: none; }
header nav { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
a { color: var(--accent); }
main { padding: 32px 24px 48px; }
h1 { font-size: 28px; line-height: 1.25; margin: 0 0 8px; }
h2 { font-size: 19px; margin: 32px 0 6px; }
p, li { max-width: 68ch; }
.lede { color: var(--muted); font-size: 18px; margin-top: 0; }
.updated { color: var(--muted); font-size: 14px; }
ul { padding-left: 22px; }
.box { border: 1px solid var(--line); background: var(--panel); padding: 12px 16px; margin: 20px 0; }
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer .in { padding: 16px 24px; display: flex; gap: 18px; flex-wrap: wrap; }