:root { --bg: #fafaf9; --fg: #1c1c1c; --muted: #666; /* Code block: slightly lighter than page. Output: slightly darker. */ --rust-bg: #ffffff; --output-bg: #f2efe8; --accent: #b25000; --rule: #d8d4cc; } /* Dark vars. The .dark class is set by the inline script based on localStorage and OS preference; the same selector is used by syntax.css to flip code-block colors. */ :root.dark { --bg: #15181d; --fg: #e8e8ea; --muted: #9a9aa3; --rust-bg: #2b303b; --output-bg: #0d0f13; --accent: #ff9c5a; --rule: #2a2f37; } * { box-sizing: border-box; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-weight: 350; background: var(--bg); color: var(--fg); line-height: 1.5; margin: 0 auto; padding: 2rem 1.5rem 4rem; max-width: 1100px; } header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } header h1 { margin: 0; font-family: "Commit Mono", "Recursive", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-variation-settings: "MONO" 1; font-weight: 400; } header h1 .tagline { font-family: "EB Garamond", Georgia, serif; font-weight: 400; font-variation-settings: normal; color: var(--muted, inherit); } button.theme-toggle { appearance: none; background: transparent; border: 1px solid var(--rule); border-radius: 4px; padding: 0.4rem 0.85rem; color: var(--fg); cursor: pointer; font: inherit; font-size: 0.875rem; flex-shrink: 0; } button.theme-toggle:hover { border-color: var(--accent); color: var(--accent); } a { color: var(--accent); } code, pre { font-family: "Commit Mono", "Recursive", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-variation-settings: "MONO" 1; font-size: 0.875rem; } nav.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 1rem 0 0; border-bottom: 1px solid var(--rule); } nav.tabs.subtabs { margin-top: 0.5rem; font-size: 0.95rem; } /* Sub-tabs always render to keep the panel below at a stable y-position; when the top tab isn't tracing-subscriber the row is invisible but continues to occupy its layout space. */ nav.tabs.subtabs.inactive { visibility: hidden; pointer-events: none; } nav.tabs button { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 0.5rem 0.9rem; font: inherit; color: var(--muted); cursor: pointer; margin-bottom: -1px; } nav.tabs button code { font-size: 0.95em; color: inherit; } nav.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); } nav.tabs button:hover { color: var(--fg); } nav.tabs .hint { color: var(--muted); font-size: 0.85em; margin-left: 0.25rem; } .panels { margin-top: 1.25rem; } article.cell { margin: 0 0 1.5rem; } article.cell:last-child { margin-bottom: 0; } .cell-label { font-size: 0.95rem; font-weight: 400; margin: 0 0 0.5rem; color: var(--fg); } .cell-label code { font-size: 0.95em; } .pair { display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; border: 1px solid var(--rule); } .pair pre { margin: 0; padding: 0.75rem 1rem; overflow-x: auto; white-space: pre; } pre.rust { background-color: var(--rust-bg); color: var(--fg); } pre.output { background-color: var(--output-bg); color: var(--fg); border-top: 1px solid var(--rule); } [hidden] { display: none !important; } .site-footer { margin-top: 3rem; font-size: 0.875rem; font-weight: 200; color: var(--muted); opacity: 0.3; text-align: center; } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--accent); text-decoration: underline; }