/* ============================================================================= Deep Research — entry / about / faq / graph pages. Design language mirrors krisyotam/share + krisyotam/tools. Index page uses its own static/index.css. ============================================================================= */ /* ── Tokens — OpenAI (ChatGPT) language ───────────────────────── See CLAUDE.md for the full reference + local divergences. */:root { /* OpenAI named palette */ --color-carbon: #0d0d0d; --color-snow: #ffffff; --color-fog: #f9f9f9; --color-pewter: #5d5d5d; --color-stone: #8f8f8f; --color-arctic-mist: #ececec; --color-link-blue: #007aff; /* Semantic surfaces (light default) */ --bg-color: var(--color-snow); --bg-surface: var(--color-fog); --bg-hover: var(--color-arctic-mist); --fg-color: var(--color-carbon); --fg-muted: var(--color-pewter); --fg-dim: var(--color-stone); --border-color: rgba(0,0,0,0.08); --rule-color: rgba(0,0,0,0.12); --link: var(--color-link-blue); --code-bg: var(--color-fog); --panel-bg: var(--color-snow); /* Legacy HSL-triple aliases — preserved so the rest of the stylesheet (toolbar, panel, sidebar) doesn't need a rewrite. */ --bg: 0 0% 100%; --fg: 0 0% 5%; --fg-dim-h: 0 0% 56%; --muted: 0 0% 92%; --muted-fg: 0 0% 37%; --border: 0 0% 92%; --rule: 0 0% 86%; --accent: 0 0% 98%; /* Aliases used by d3 graph code — keep them resolving to colors */ --text: var(--fg-color); --text-muted: var(--fg-muted); --text-dim: var(--color-stone); /* Type families — OpenAI uses the system stack */ --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-title: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Aliases for older rules that referenced --serif / --sans / --mono */ --serif: var(--font-title); --sans: var(--font-ui); --mono: var(--font-mono); /* OpenAI type scale */ --text-caption: 14px; --leading-caption: 1.43; --text-body: 16px; --leading-body: 1.5; --text-subheading: 18px; --leading-subheading: 1.56; --text-heading: 24px; --leading-heading: 1; /* OpenAI spacing scale */ --spacing-4: 4px; --spacing-6: 6px; --spacing-8: 8px; --spacing-10: 10px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-60: 60px; --spacing-64: 64px; --spacing-127: 127px; /* Radii */ --radius-default: 10px; --radius-button: 10px; --radius-pill: 16px; --radius-input: 28px; --sidebar-w: 56px; --panel-w: 380px; --max-content: 720px; --max-breakout: 1100px;} [data-theme="dark"] { --bg-color: #121212; --bg-surface: #1a1a1a; --bg-hover: #222222; --fg-color: #f3f3f3; --fg-muted: #a8a8a8; --fg-dim: #6f6f6f; --border-color: rgba(255,255,255,0.10); --rule-color: rgba(255,255,255,0.16); --code-bg: #1a1a1a; --panel-bg: #121212; --bg: 0 0% 7%; --fg: 0 0% 95%; --fg-dim-h: 0 0% 44%; --muted: 0 0% 8%; --muted-fg: 0 0% 66%; --border: 0 0% 10%; --rule: 0 0% 14%; --accent: 0 0% 8%; color-scheme: dark;} @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bg-color: #121212; --bg-surface: #1a1a1a; --bg-hover: #222222; --fg-color: #f3f3f3; --fg-muted: #a8a8a8; --fg-dim: #6f6f6f; --border-color: rgba(255,255,255,0.10); --rule-color: rgba(255,255,255,0.16); --code-bg: #1a1a1a; --panel-bg: #121212; --bg: 0 0% 7%; --fg: 0 0% 95%; --fg-dim-h: 0 0% 44%; --muted: 0 0% 8%; --muted-fg: 0 0% 66%; --border: 0 0% 10%; --rule: 0 0% 14%; --accent: 0 0% 8%; }} /* Theme-icon visibility (Sun shown in dark, Moon shown in light) */.theme-icon-light { display: none; }.theme-icon-dark { display: flex; }[data-theme="dark"] .theme-icon-light { display: flex; }[data-theme="dark"] .theme-icon-dark { display: none; } /* ── Base ─────────────────────────────────────────────────────── */*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }html { font-size: 16px; }html, body { background: var(--bg-color); color: var(--fg-color);}body { font-family: var(--font-ui); font-feature-settings: "liga" 0; font-size: var(--text-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;} /* ── Layout ───────────────────────────────────────────────────── */.layout { display: flex; min-height: 100vh; min-height: 100dvh; } /* ── Left sidebar — minimal dot rail + hover tooltips (original) ── */.sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--bg-surface); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; padding: var(--spacing-16) 0; z-index: 10;} .sidebar-back { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: hsl(var(--muted-fg)); text-decoration: none; border-radius: 6px; transition: background 0.15s, color 0.15s;}.sidebar-back:hover { background: hsl(var(--accent)); color: hsl(var(--fg)); }.sidebar-back svg { width: 18px; height: 18px; } .toc { margin: auto 0; /* center the dot cluster in remaining sidebar space */ list-style: none; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px; overflow-y: auto; flex: 0 0 auto; /* take natural height; don't stretch */ max-height: calc(100% - 64px); /* safety: scroll if cluster is taller than viewport */ scrollbar-width: none;}.toc::-webkit-scrollbar { display: none; } .toc li { position: relative; } .toc a { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-dim); /* Stone — visible on Fog rail */ margin: 4px auto; transition: background 0.2s, transform 0.2s; text-decoration: none;}.toc a:hover,.toc a.active { background: var(--fg-color); /* Carbon — focused dot pops */ transform: scale(1.5);} .toc-tooltip { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); background: hsl(var(--bg)); border: 1px solid hsl(var(--border)); color: hsl(var(--fg)); padding: 4px 10px; border-radius: 6px; font-family: var(--sans); font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,0.06);}[data-theme="dark"] .toc-tooltip { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }.toc li:hover .toc-tooltip { opacity: 1; } /* ── Main content column ──────────────────────────────────────── */.main { margin-left: var(--sidebar-w); flex: 1; display: flex; justify-content: center; padding: 72px 56px 120px;}.content { max-width: var(--max-content); width: 100%;} /* ── Header section (title + meta) ───────────────────────────── Title: Lora serif — the only font distinction in the document, marking "editorial report" the way OpenAI Sans marks the hero prompt on chatgpt.com. Sized at the heading rung but weight 500. ============================================================== */.content > h1 { font-family: var(--font-title); font-weight: 500; font-size: 36px; letter-spacing: -0.016em; line-height: 1.12; color: var(--fg-color); margin: 0 0 var(--spacing-12);}.content-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--fg-muted); margin-bottom: var(--spacing-64); display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-10);}.content-meta time { font-variant-numeric: tabular-nums; }.content-meta .sep { color: var(--color-stone); opacity: 0.5; font-size: 12px; line-height: 1;}.content-meta .meta-tags { color: var(--fg-muted); } /* ── Content typography — OpenAI ───────────────────────────────── System UI for body and section headings. 16/1.7 (1.7 line-height is our local divergence from 1.5; long-form reading wants it). Headings stay within the 24px max weight 600 rule. =============================================================== */.content { font-family: var(--font-ui); font-feature-settings: "liga" 0; font-size: var(--text-body); line-height: 1.7; color: var(--fg-color); font-weight: 400;}.content h2 { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-heading); letter-spacing: -0.012em; line-height: 1.15; margin: var(--spacing-64) 0 var(--spacing-16); color: var(--fg-color);}.content h3 { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-subheading); letter-spacing: -0.005em; line-height: var(--leading-subheading); margin: 40px 0 var(--spacing-10); color: var(--fg-color);}.content h4 { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); margin: var(--spacing-20) 0 var(--spacing-6);}.content h5, .content h6 { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-caption); color: var(--fg-color); margin: var(--spacing-16) 0 var(--spacing-6);}.content h2 + h3, .content h3 + h4 { margin-top: var(--spacing-16); }.content p { margin-bottom: var(--spacing-16); }.content a { color: var(--link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--link) 30%, transparent); padding-bottom: 1px; transition: border-color 140ms ease;}.content a:hover { border-bottom-color: var(--link); } .content ul, .content ol { margin: 0 0 var(--spacing-16) 0; padding-left: var(--spacing-20); }.content li { margin-bottom: var(--spacing-6); } .content blockquote { border-left: 2px solid var(--rule-color); padding: var(--spacing-4) 0 var(--spacing-4) var(--spacing-16); color: var(--fg-muted); margin: var(--spacing-20) 0;}.content blockquote blockquote { margin-top: var(--spacing-8); border-left-color: var(--border-color);} .content strong { font-weight: 600; color: var(--fg-color); }.content em { font-style: italic; }/* Markdown often double-bolds headings with ** — keep heading weight neutral. */.content h1 strong, .content h2 strong, .content h3 strong,.content h4 strong, .content h5 strong, .content h6 strong { font-weight: inherit; color: inherit;} .content code { font-family: var(--font-mono); font-size: 14px; background: var(--code-bg); border: 1px solid var(--border-color); padding: 1px 6px; border-radius: var(--radius-default);}.content pre { font-family: var(--font-mono); font-size: 14px; line-height: 1.55; background: var(--code-bg); border: 1px solid var(--border-color); border-radius: var(--radius-default); padding: var(--spacing-12) var(--spacing-16); margin: var(--spacing-20) 0; overflow-x: auto;}.content pre code { background: transparent; border: 0; padding: 0; font-size: inherit; } .content hr { border: 0; border-top: 1px solid var(--rule-color); margin: var(--spacing-60) 0;} .content img { max-width: 100%; height: auto; display: block; margin: var(--spacing-20) auto; border-radius: var(--radius-default);} /* Tables — break out of the 720px reading column up to 1100px wide, centered within .main, never crossing the 56px sidebar. The table itself uses the OpenAI spacing/density. */.content .table-wrap { position: relative; width: min(var(--max-breakout), calc(100vw - var(--sidebar-w) - var(--spacing-64))); left: 50%; transform: translateX(-50%); margin: var(--spacing-20) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-default);}.content table { width: 100%; border-collapse: collapse; font-size: var(--text-caption); line-height: var(--leading-caption); margin: 0;}.content thead { background: var(--bg-surface); border-bottom: 1px solid var(--border-color);}.content th { text-align: left; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); padding: var(--spacing-10) var(--spacing-12); white-space: nowrap;}.content td { padding: var(--spacing-10) var(--spacing-12); border-bottom: 1px solid var(--border-color); vertical-align: top;}.content tbody tr:last-child td { border-bottom: none; }.content tbody tr:hover { background: var(--bg-surface); }.content tbody tr { transition: background 120ms ease; } .content dl { margin-bottom: var(--spacing-16); }.content dt { font-weight: 600; margin-bottom: var(--spacing-4); }.content dd { margin-left: var(--spacing-20); margin-bottom: var(--spacing-12); color: var(--fg-muted); } .cite-ref { font-family: var(--font-mono); font-size: 11px; vertical-align: super; color: var(--link); cursor: pointer; margin-left: 1px;}.cite-ref:hover { text-decoration: underline; } /* ── Toolbar (top right) ─────────────────────────────────────── */.toolbar { position: fixed; top: 18px; right: 24px; display: flex; gap: 6px; z-index: 20;}.toolbar-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid hsl(var(--border)); border-radius: 4px; background: hsl(var(--bg)); color: hsl(var(--fg-dim)); cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; position: relative;}.toolbar-btn:hover { background: hsl(var(--accent)); color: hsl(var(--fg)); border-color: hsl(var(--rule)); }.toolbar-btn svg { width: 15px; height: 15px; } /* ── Download dropdown ───────────────────────────────────────── */.download-menu { position: absolute; top: calc(100% + 6px); right: 0; background: hsl(var(--bg)); border: 1px solid hsl(var(--border)); border-radius: 6px; padding: 4px; min-width: 180px;Lines 1–500 of 881. Load more
/* ============================================================================= Deep Research — entry / about / faq / graph pages. Design language mirrors krisyotam/share + krisyotam/tools. Index page uses its own static/index.css. ============================================================================= */ /* ── Tokens — OpenAI (ChatGPT) language ───────────────────────── See CLAUDE.md for the full reference + local divergences. */ :root { /* OpenAI named palette */ --color-carbon: #0d0d0d; --color-snow: #ffffff; --color-fog: #f9f9f9; --color-pewter: #5d5d5d; --color-stone: #8f8f8f; --color-arctic-mist: #ececec; --color-link-blue: #007aff; /* Semantic surfaces (light default) */ --bg-color: var(--color-snow); --bg-surface: var(--color-fog); --bg-hover: var(--color-arctic-mist); --fg-color: var(--color-carbon); --fg-muted: var(--color-pewter); --fg-dim: var(--color-stone); --border-color: rgba(0,0,0,0.08); --rule-color: rgba(0,0,0,0.12); --link: var(--color-link-blue); --code-bg: var(--color-fog); --panel-bg: var(--color-snow); /* Legacy HSL-triple aliases — preserved so the rest of the stylesheet (toolbar, panel, sidebar) doesn't need a rewrite. */ --bg: 0 0% 100%; --fg: 0 0% 5%; --fg-dim-h: 0 0% 56%; --muted: 0 0% 92%; --muted-fg: 0 0% 37%; --border: 0 0% 92%; --rule: 0 0% 86%; --accent: 0 0% 98%; /* Aliases used by d3 graph code — keep them resolving to colors */ --text: var(--fg-color); --text-muted: var(--fg-muted); --text-dim: var(--color-stone); /* Type families — OpenAI uses the system stack */ --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-title: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Aliases for older rules that referenced --serif / --sans / --mono */ --serif: var(--font-title); --sans: var(--font-ui); --mono: var(--font-mono); /* OpenAI type scale */ --text-caption: 14px; --leading-caption: 1.43; --text-body: 16px; --leading-body: 1.5; --text-subheading: 18px; --leading-subheading: 1.56; --text-heading: 24px; --leading-heading: 1; /* OpenAI spacing scale */ --spacing-4: 4px; --spacing-6: 6px; --spacing-8: 8px; --spacing-10: 10px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-60: 60px; --spacing-64: 64px; --spacing-127: 127px; /* Radii */ --radius-default: 10px; --radius-button: 10px; --radius-pill: 16px; --radius-input: 28px; --sidebar-w: 56px; --panel-w: 380px; --max-content: 720px; --max-breakout: 1100px; } [data-theme="dark"] { --bg-color: #121212; --bg-surface: #1a1a1a; --bg-hover: #222222; --fg-color: #f3f3f3; --fg-muted: #a8a8a8; --fg-dim: #6f6f6f; --border-color: rgba(255,255,255,0.10); --rule-color: rgba(255,255,255,0.16); --code-bg: #1a1a1a; --panel-bg: #121212; --bg: 0 0% 7%; --fg: 0 0% 95%; --fg-dim-h: 0 0% 44%; --muted: 0 0% 8%; --muted-fg: 0 0% 66%; --border: 0 0% 10%; --rule: 0 0% 14%; --accent: 0 0% 8%; color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bg-color: #121212; --bg-surface: #1a1a1a; --bg-hover: #222222; --fg-color: #f3f3f3; --fg-muted: #a8a8a8; --fg-dim: #6f6f6f; --border-color: rgba(255,255,255,0.10); --rule-color: rgba(255,255,255,0.16); --code-bg: #1a1a1a; --panel-bg: #121212; --bg: 0 0% 7%; --fg: 0 0% 95%; --fg-dim-h: 0 0% 44%; --muted: 0 0% 8%; --muted-fg: 0 0% 66%; --border: 0 0% 10%; --rule: 0 0% 14%; --accent: 0 0% 8%; } } /* Theme-icon visibility (Sun shown in dark, Moon shown in light) */ .theme-icon-light { display: none; } .theme-icon-dark { display: flex; } [data-theme="dark"] .theme-icon-light { display: flex; } [data-theme="dark"] .theme-icon-dark { display: none; } /* ── Base ─────────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; } html, body { background: var(--bg-color); color: var(--fg-color); } body { font-family: var(--font-ui); font-feature-settings: "liga" 0; font-size: var(--text-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── Layout ───────────────────────────────────────────────────── */ .layout { display: flex; min-height: 100vh; min-height: 100dvh; } /* ── Left sidebar — minimal dot rail + hover tooltips (original) ── */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--bg-surface); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; padding: var(--spacing-16) 0; z-index: 10; } .sidebar-back { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: hsl(var(--muted-fg)); text-decoration: none; border-radius: 6px; transition: background 0.15s, color 0.15s; } .sidebar-back:hover { background: hsl(var(--accent)); color: hsl(var(--fg)); } .sidebar-back svg { width: 18px; height: 18px; } .toc { margin: auto 0; /* center the dot cluster in remaining sidebar space */ list-style: none; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px; overflow-y: auto; flex: 0 0 auto; /* take natural height; don't stretch */ max-height: calc(100% - 64px); /* safety: scroll if cluster is taller than viewport */ scrollbar-width: none; } .toc::-webkit-scrollbar { display: none; } .toc li { position: relative; } .toc a { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-dim); /* Stone — visible on Fog rail */ margin: 4px auto; transition: background 0.2s, transform 0.2s; text-decoration: none; } .toc a:hover, .toc a.active { background: var(--fg-color); /* Carbon — focused dot pops */ transform: scale(1.5); } .toc-tooltip { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); background: hsl(var(--bg)); border: 1px solid hsl(var(--border)); color: hsl(var(--fg)); padding: 4px 10px; border-radius: 6px; font-family: var(--sans); font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,0.06); } [data-theme="dark"] .toc-tooltip { box-shadow: 0 4px 16px rgba(0,0,0,0.4); } .toc li:hover .toc-tooltip { opacity: 1; } /* ── Main content column ──────────────────────────────────────── */ .main { margin-left: var(--sidebar-w); flex: 1; display: flex; justify-content: center; padding: 72px 56px 120px; } .content { max-width: var(--max-content); width: 100%; } /* ── Header section (title + meta) ───────────────────────────── Title: Lora serif — the only font distinction in the document, marking "editorial report" the way OpenAI Sans marks the hero prompt on chatgpt.com. Sized at the heading rung but weight 500. ============================================================== */ .content > h1 { font-family: var(--font-title); font-weight: 500; font-size: 36px; letter-spacing: -0.016em; line-height: 1.12; color: var(--fg-color); margin: 0 0 var(--spacing-12); } .content-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--fg-muted); margin-bottom: var(--spacing-64); display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-10); } .content-meta time { font-variant-numeric: tabular-nums; } .content-meta .sep { color: var(--color-stone); opacity: 0.5; font-size: 12px; line-height: 1; } .content-meta .meta-tags { color: var(--fg-muted); } /* ── Content typography — OpenAI ───────────────────────────────── System UI for body and section headings. 16/1.7 (1.7 line-height is our local divergence from 1.5; long-form reading wants it). Headings stay within the 24px max weight 600 rule. =============================================================== */ .content { font-family: var(--font-ui); font-feature-settings: "liga" 0; font-size: var(--text-body); line-height: 1.7; color: var(--fg-color); font-weight: 400; } .content h2 { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-heading); letter-spacing: -0.012em; line-height: 1.15; margin: var(--spacing-64) 0 var(--spacing-16); color: var(--fg-color); } .content h3 { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-subheading); letter-spacing: -0.005em; line-height: var(--leading-subheading); margin: 40px 0 var(--spacing-10); color: var(--fg-color); } .content h4 { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); margin: var(--spacing-20) 0 var(--spacing-6); } .content h5, .content h6 { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-caption); color: var(--fg-color); margin: var(--spacing-16) 0 var(--spacing-6); } .content h2 + h3, .content h3 + h4 { margin-top: var(--spacing-16); } .content p { margin-bottom: var(--spacing-16); } .content a { color: var(--link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--link) 30%, transparent); padding-bottom: 1px; transition: border-color 140ms ease; } .content a:hover { border-bottom-color: var(--link); } .content ul, .content ol { margin: 0 0 var(--spacing-16) 0; padding-left: var(--spacing-20); } .content li { margin-bottom: var(--spacing-6); } .content blockquote { border-left: 2px solid var(--rule-color); padding: var(--spacing-4) 0 var(--spacing-4) var(--spacing-16); color: var(--fg-muted); margin: var(--spacing-20) 0; } .content blockquote blockquote { margin-top: var(--spacing-8); border-left-color: var(--border-color); } .content strong { font-weight: 600; color: var(--fg-color); } .content em { font-style: italic; } /* Markdown often double-bolds headings with ** — keep heading weight neutral. */ .content h1 strong, .content h2 strong, .content h3 strong, .content h4 strong, .content h5 strong, .content h6 strong { font-weight: inherit; color: inherit; } .content code { font-family: var(--font-mono); font-size: 14px; background: var(--code-bg); border: 1px solid var(--border-color); padding: 1px 6px; border-radius: var(--radius-default); } .content pre { font-family: var(--font-mono); font-size: 14px; line-height: 1.55; background: var(--code-bg); border: 1px solid var(--border-color); border-radius: var(--radius-default); padding: var(--spacing-12) var(--spacing-16); margin: var(--spacing-20) 0; overflow-x: auto; } .content pre code { background: transparent; border: 0; padding: 0; font-size: inherit; } .content hr { border: 0; border-top: 1px solid var(--rule-color); margin: var(--spacing-60) 0; } .content img { max-width: 100%; height: auto; display: block; margin: var(--spacing-20) auto; border-radius: var(--radius-default); } /* Tables — break out of the 720px reading column up to 1100px wide, centered within .main, never crossing the 56px sidebar. The table itself uses the OpenAI spacing/density. */ .content .table-wrap { position: relative; width: min(var(--max-breakout), calc(100vw - var(--sidebar-w) - var(--spacing-64))); left: 50%; transform: translateX(-50%); margin: var(--spacing-20) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-default); } .content table { width: 100%; border-collapse: collapse; font-size: var(--text-caption); line-height: var(--leading-caption); margin: 0; } .content thead { background: var(--bg-surface); border-bottom: 1px solid var(--border-color); } .content th { text-align: left; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); padding: var(--spacing-10) var(--spacing-12); white-space: nowrap; } .content td { padding: var(--spacing-10) var(--spacing-12); border-bottom: 1px solid var(--border-color); vertical-align: top; } .content tbody tr:last-child td { border-bottom: none; } .content tbody tr:hover { background: var(--bg-surface); } .content tbody tr { transition: background 120ms ease; } .content dl { margin-bottom: var(--spacing-16); } .content dt { font-weight: 600; margin-bottom: var(--spacing-4); } .content dd { margin-left: var(--spacing-20); margin-bottom: var(--spacing-12); color: var(--fg-muted); } .cite-ref { font-family: var(--font-mono); font-size: 11px; vertical-align: super; color: var(--link); cursor: pointer; margin-left: 1px; } .cite-ref:hover { text-decoration: underline; } /* ── Toolbar (top right) ─────────────────────────────────────── */ .toolbar { position: fixed; top: 18px; right: 24px; display: flex; gap: 6px; z-index: 20; } .toolbar-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid hsl(var(--border)); border-radius: 4px; background: hsl(var(--bg)); color: hsl(var(--fg-dim)); cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; position: relative; } .toolbar-btn:hover { background: hsl(var(--accent)); color: hsl(var(--fg)); border-color: hsl(var(--rule)); } .toolbar-btn svg { width: 15px; height: 15px; } /* ── Download dropdown ───────────────────────────────────────── */ .download-menu { position: absolute; top: calc(100% + 6px); right: 0; background: hsl(var(--bg)); border: 1px solid hsl(var(--border)); border-radius: 6px; padding: 4px; min-width: 180px;