.sitebar, .sitefoot { --ch-bg: #0a0d0c; --ch-fg: #f5f5f7; --ch-fg-2: #a1a1a6; --ch-ink: #f4f1ea; --ch-logo: #46d6a0; --ch-accent: #46d6a0; --ch-accent-ink: #0a0d0c; --ch-accent-hover: #7be8c2; --ch-hair: #1d211f; } @font-face { font-family: 'Inter'; src: url('/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } .sitebar, .sitefoot { box-sizing: border-box; background: var(--ch-bg); color: var(--ch-fg); font: 400 1rem/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: -.011em; -webkit-text-size-adjust: 100%; } .sitebar *, .sitefoot * { box-sizing: border-box; } .sitebar a, .sitefoot a { color: inherit; text-decoration: none; } .sitebar a:focus-visible, .sitefoot a:focus-visible { outline: 3px solid var(--ch-accent); outline-offset: 3px; border-radius: 8px; } .sitebar .wm-ink, .sitefoot .wm-ink { fill: var(--ch-ink); } .sitebar .wm-o, .sitefoot .wm-o { fill: var(--ch-logo); } @media (forced-colors: active) { .sitebar .wm-ink, .sitefoot .wm-ink { fill: CanvasText; } .sitebar .wm-o, .sitefoot .wm-o { fill: LinkText; } } .sb-mark { display: inline-flex; align-items: center; min-height: 44px; flex: none; } .sb-mark svg { display: block; height: 28px; width: auto; max-width: none; } .sitebar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--ch-hair); } .sb-in { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 1280px; min-height: 64px; margin: 0 auto; padding: 0 20px; } .sb-mark { margin-right: auto; } .sb-signin { display: none; align-items: center; min-height: 36px; padding: 0 12px; font-size: .875rem; line-height: 1.43; color: var(--ch-fg-2); } .sb-signin:hover { color: var(--ch-fg); } .sb-signup { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 980px; background: var(--ch-accent); color: var(--ch-accent-ink) !important; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; white-space: nowrap; } .sb-signup:hover { background: var(--ch-accent-hover); } .sitefoot { border-top: 1px solid var(--ch-hair); padding: 8px 0; font-size: .75rem; line-height: 1.33; color: var(--ch-fg-2); } .sf-in { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; align-items: center; gap: 0; } .sf-note { display: none; } .sf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin: 0; padding: 0; list-style: none; } .sf-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--ch-fg-2); overflow-wrap: anywhere; } .sf-links a:hover { color: var(--ch-fg); } .sf-long { display: none; } @media (min-width: 720px) { .sb-in, .sf-in { padding: 0 40px; } .sb-mark svg { height: 32px; } .sb-signin { display: inline-flex; } .sb-signup { min-height: 36px; padding: 0 16px; font-size: .875rem; line-height: 1.43; } } @media (min-width: 768px) { .sitefoot { padding: 6px 0; } .sf-in { flex-direction: row; justify-content: space-between; align-items: center; } .sf-note { display: inline; } .sf-links a { min-height: 32px; padding: 0 0 0 20px; } .sf-short { display: none; } .sf-long { display: inline; } } @media (max-width: 359px) { .sb-in { padding: 0 12px; } .sb-signup { padding: 0 14px; } }