/* ============================================================================= Deep Research — index page only. Design language mirrors krisyotam/share + krisyotam/tools. Independent of static/style.css (which still styles entry pages). ============================================================================= */ :root { --bg: 0 0% 100%; --fg: 0 0% 20%; --fg-dim: 0 0% 35%; --muted: 0 0% 92%; --muted-fg: 0 0% 50%; --border: 0 0% 88%; --rule: 0 0% 82%; --accent: 0 0% 96%; --serif: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', serif; --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;} [data-theme="dark"] { --bg: 0 0% 7%; --fg: 0 0% 96%; --fg-dim: 0 0% 78%; --muted: 0 0% 12%; --muted-fg: 0 0% 60%; --border: 0 0% 17%; --rule: 0 0% 22%; --accent: 0 0% 11%; color-scheme: dark;} @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bg: 0 0% 7%; --fg: 0 0% 96%; --fg-dim: 0 0% 78%; --muted: 0 0% 12%; --muted-fg: 0 0% 60%; --border: 0 0% 17%; --rule: 0 0% 22%; --accent: 0 0% 11%; }} * { margin: 0; padding: 0; box-sizing: border-box; }html, body { background: hsl(var(--bg)); color: hsl(var(--fg)); }body { font-family: var(--sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;} .page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }.grow { flex-grow: 1; }.shell { width: 100%; max-width: 640px; margin: 0 auto; padding: 80px 32px 56px; } /* ── header ──────────────────────────────────────────────────── */.head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px;}.brand h1 { font-family: var(--serif); font-weight: 500; font-size: 32px; letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 6px;}.brand p { font-family: var(--serif); font-style: italic; font-size: 14px; color: hsl(var(--muted-fg));} /* ── toggle ──────────────────────────────────────────────────── */.toggle { appearance: none; background: transparent; border: 1px solid hsl(var(--border)); color: hsl(var(--fg-dim)); width: 32px; height: 32px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease, border-color 120ms ease;}.toggle:hover { background: hsl(var(--accent)); color: hsl(var(--fg)); border-color: hsl(var(--rule)); }.toggle svg { width: 16px; height: 16px; }.toggle .icon-sun { display: none; }.toggle .icon-moon { display: block; }[data-theme="dark"] .toggle .icon-sun { display: block; }[data-theme="dark"] .toggle .icon-moon { display: none; } /* ── small nav row (about · faq · graph) ─────────────────────── */.nav-row { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 32px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--muted-fg));}.nav-row a { color: hsl(var(--muted-fg)); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color 120ms ease, border-color 120ms ease;}.nav-row a:hover { color: hsl(var(--fg)); border-bottom-color: hsl(var(--rule)); } /* ── search ──────────────────────────────────────────────────── */.search { position: relative; margin-bottom: 28px; }.search input { width: 100%; appearance: none; background: transparent; border: none; border-bottom: 1px solid hsl(var(--rule)); padding: 10px 0 10px 22px; font-family: var(--sans); font-size: 15px; color: hsl(var(--fg)); outline: none; transition: border-color 150ms ease;}.search input:focus { border-color: hsl(var(--fg-dim)); }.search input::placeholder { color: hsl(var(--muted-fg)); }.search-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: hsl(var(--muted-fg)); pointer-events: none; }.search-kbd { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; color: hsl(var(--muted-fg)); background: hsl(var(--accent)); border: 1px solid hsl(var(--border)); border-radius: 3px; padding: 2px 6px; pointer-events: none;}.search input:focus + .search-kbd { display: none; } /* ── single-column table of entry names ──────────────────────── */table.entries { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed;}table.entries tbody tr { transition: background 100ms ease; }table.entries tbody tr:hover { background: hsl(var(--accent)); }table.entries tbody td { padding: 10px 16px 10px 8px; vertical-align: middle; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}table.entries tbody td:first-child { padding-left: 8px; }table.entries tbody td:last-child { padding-right: 8px; } td.name a { color: hsl(var(--fg)); font-weight: 500; font-size: 14px; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 120ms ease;}td.name a:hover { border-bottom-color: hsl(var(--rule)); } tr.hidden { display: none; } .empty { font-family: var(--serif); font-style: italic; font-size: 14px; color: hsl(var(--muted-fg)); padding: 28px 8px; display: none;}.empty.show { display: block; } /* ── footer (floored) ────────────────────────────────────────── */footer.shell-footer { width: 100%; max-width: 640px; margin: 0 auto; padding: 20px 32px 28px;}.foot-inner { padding-top: 18px; border-top: 1px solid hsl(var(--rule)); font-family: var(--mono); font-size: 11px; color: hsl(var(--muted-fg)); display: flex; justify-content: space-between;}footer.shell-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: hsl(var(--border));}footer.shell-footer a:hover { text-decoration-color: hsl(var(--muted-fg)); } @media (max-width: 560px) { .shell { padding: 56px 22px 40px; } footer.shell-footer { padding: 12px 22px 24px; }}
/* =============================================================================
Deep Research — index page only.
Design language mirrors krisyotam/share + krisyotam/tools.
Independent of static/style.css (which still styles entry pages).
============================================================================= */
:root {
--bg: 0 0% 100%;
--fg: 0 0% 20%;
--fg-dim: 0 0% 35%;
--muted: 0 0% 92%;
--muted-fg: 0 0% 50%;
--border: 0 0% 88%;
--rule: 0 0% 82%;
--accent: 0 0% 96%;
--serif: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', serif;
--sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}
[data-theme="dark"] {
--bg: 0 0% 7%;
--fg: 0 0% 96%;
--fg-dim: 0 0% 78%;
--muted: 0 0% 12%;
--muted-fg: 0 0% 60%;
--border: 0 0% 17%;
--rule: 0 0% 22%;
--accent: 0 0% 11%;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]):not([data-theme="dark"]) {
color-scheme: dark;
--bg: 0 0% 7%;
--fg: 0 0% 96%;
--fg-dim: 0 0% 78%;
--muted: 0 0% 12%;
--muted-fg: 0 0% 60%;
--border: 0 0% 17%;
--rule: 0 0% 22%;
--accent: 0 0% 11%;
}
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: hsl(var(--bg)); color: hsl(var(--fg)); }
body {
font-family: var(--sans);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.grow { flex-grow: 1; }
.shell { width: 100%; max-width: 640px; margin: 0 auto; padding: 80px 32px 56px; }
/* ── header ──────────────────────────────────────────────────── */
.head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 28px;
}
.brand h1 {
font-family: var(--serif);
font-weight: 500;
font-size: 32px;
letter-spacing: -0.01em;
line-height: 1.1;
margin-bottom: 6px;
}
.brand p {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: hsl(var(--muted-fg));
}
/* ── toggle ──────────────────────────────────────────────────── */
.toggle {
appearance: none;
background: transparent;
border: 1px solid hsl(var(--border));
color: hsl(var(--fg-dim));
width: 32px; height: 32px;
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.toggle:hover { background: hsl(var(--accent)); color: hsl(var(--fg)); border-color: hsl(var(--rule)); }
.toggle svg { width: 16px; height: 16px; }
.toggle .icon-sun { display: none; }
.toggle .icon-moon { display: block; }
[data-theme="dark"] .toggle .icon-sun { display: block; }
[data-theme="dark"] .toggle .icon-moon { display: none; }
/* ── small nav row (about · faq · graph) ─────────────────────── */
.nav-row {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 32px;
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: hsl(var(--muted-fg));
}
.nav-row a {
color: hsl(var(--muted-fg));
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: color 120ms ease, border-color 120ms ease;
}
.nav-row a:hover { color: hsl(var(--fg)); border-bottom-color: hsl(var(--rule)); }
/* ── search ──────────────────────────────────────────────────── */
.search { position: relative; margin-bottom: 28px; }
.search input {
width: 100%;
appearance: none;
background: transparent;
border: none;
border-bottom: 1px solid hsl(var(--rule));
padding: 10px 0 10px 22px;
font-family: var(--sans);
font-size: 15px;
color: hsl(var(--fg));
outline: none;
transition: border-color 150ms ease;
}
.search input:focus { border-color: hsl(var(--fg-dim)); }
.search input::placeholder { color: hsl(var(--muted-fg)); }
.search-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: hsl(var(--muted-fg)); pointer-events: none; }
.search-kbd {
position: absolute; right: 0; top: 50%; transform: translateY(-50%);
font-family: var(--mono);
font-size: 11px;
color: hsl(var(--muted-fg));
background: hsl(var(--accent));
border: 1px solid hsl(var(--border));
border-radius: 3px;
padding: 2px 6px;
pointer-events: none;
}
.search input:focus + .search-kbd { display: none; }
/* ── single-column table of entry names ──────────────────────── */
table.entries {
width: 100%;
border-collapse: collapse;
font-size: 14px;
table-layout: fixed;
}
table.entries tbody tr { transition: background 100ms ease; }
table.entries tbody tr:hover { background: hsl(var(--accent)); }
table.entries tbody td {
padding: 10px 16px 10px 8px;
vertical-align: middle;
border: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table.entries tbody td:first-child { padding-left: 8px; }
table.entries tbody td:last-child { padding-right: 8px; }
td.name a {
color: hsl(var(--fg));
font-weight: 500;
font-size: 14px;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 120ms ease;
}
td.name a:hover { border-bottom-color: hsl(var(--rule)); }
tr.hidden { display: none; }
.empty {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: hsl(var(--muted-fg));
padding: 28px 8px;
display: none;
}
.empty.show { display: block; }
/* ── footer (floored) ────────────────────────────────────────── */
footer.shell-footer {
width: 100%;
max-width: 640px;
margin: 0 auto;
padding: 20px 32px 28px;
}
.foot-inner {
padding-top: 18px;
border-top: 1px solid hsl(var(--rule));
font-family: var(--mono);
font-size: 11px;
color: hsl(var(--muted-fg));
display: flex;
justify-content: space-between;
}
footer.shell-footer a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: hsl(var(--border));
}
footer.shell-footer a:hover { text-decoration-color: hsl(var(--muted-fg)); }
@media (max-width: 560px) {
.shell { padding: 56px 22px 40px; }
footer.shell-footer { padding: 12px 22px 24px; }
}