/* ============================================================
vibe-research — additive styles on top of the site's style.css
Keep this file small. Anything in here is page-furniture for
the research index + per-piece articles; type, colour, links,
tooltip-button / action-button visuals all come from the
parent stylesheet.
============================================================ */
/* AI-GENERATED watermark — stamped on the document (not the viewport),
so it scrolls with the page. Anchored to via ::before/::after
(the parent stylesheet sets html { position: relative }, so absolute
positioning here resolves against the full document height). Both
gutters read top→bottom (same direction) and start at the very top
of the page. The text is rendered as an SVG tile that repeats
vertically, so coverage is exact regardless of document length.
pointer-events and z-index:-1 keep it clear of interactive content. */
html::before,
html::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 3.2rem; /* matches the SVG tile width / font size */
pointer-events: none;
user-select: none;
z-index: -1;
/* One vertical tile of "AI-GENERATED · ", drawn rotated 90° inside
an SVG, then repeated down the gutter. The fill colour and opacity
are baked into the SVG (#0a3d0a at 15%). */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-y;
/* Shift the tiles upward so the first repetition bleeds off the top
edge of the page — both gutters in lockstep, since this rule
applies to both ::before and ::after. */
background-position: center -4rem;
background-size: 3.2rem auto;
}
html::before {
left: 3.75rem;
/* Same tile, but text rotated -90° so it reads bottom→top within each
tile (a 180° flip of the right gutter). Tiles still anchor to the
top of the page, so the watermark still starts at the top. */
background-image: url("data:image/svg+xml;utf8,");
}
html::after { right: 3.75rem; }
/* Dark mode — same dark green, nudged a touch brighter so it reads
against the darker plateau without washing out. */
:root.dark::after {
background-image: url("data:image/svg+xml;utf8,");
}
:root.dark::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Narrow viewports — the side gutters collapse below ~1380px in the
parent stylesheet, so pull the watermark in tighter and dim it
further so it doesn't crowd the reading column. */
@media (max-width: 1380px) {
html::before,
html::after {
width: 2.4rem;
background-size: 2.4rem auto;
background-image: url("data:image/svg+xml;utf8,");
}
html::before {
left: 0.6rem;
background-image: url("data:image/svg+xml;utf8,");
}
html::after { right: 0.6rem; }
:root.dark::after {
background-image: url("data:image/svg+xml;utf8,");
}
:root.dark::before {
background-image: url("data:image/svg+xml;utf8,");
}
}
@media (max-width: 720px) {
html::before,
html::after { display: none; }
}
/* Index: list of research pieces, recent-first. Each piece is a
block-level anchor wrapping its own content; the box itself is
the link surface, not the title. */
.vr-feed {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
}
.vr-card {
display: block;
padding: 1rem 1.1rem 1rem;
border: 1px solid var(--h3);
border-radius: 6px;
background: transparent;
color: var(--text); /* override the anchor orange — body colour wins */
font-weight: 440;
text-decoration: none;
transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.vr-card:hover {
background-color: rgba(44, 106, 29, 0.06); /* faint --h3 wash */
border-color: var(--h2);
text-decoration: none;
transform: translateY(-1px);
}
.vr-card .vr-date {
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--h3);
font-weight: 500;
}
.vr-card .vr-title {
display: block;
margin: 0.15rem 0 0.2rem;
font-size: 1.15rem;
font-weight: 600;
color: var(--h2); /* same green as h2 — reads as a heading inside the card */
}
.vr-card .vr-desc {
margin: 0;
font-size: 0.97rem;
line-height: 1.5;
}
.vr-card .vr-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0.55rem 0 0;
}
.vr-tag {
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.04em;
padding: 0.1rem 0.45rem;
border-radius: 3px;
background: rgba(64, 135, 162, 0.12); /* faint --ttbtn blue */
color: var(--ttbtn);
}
/* ----- per-article furniture --------------------------------- */
/* Slim header above the article body — date / hardware / source line. */
.vr-byline {
font-size: 0.9rem;
color: var(--h3);
margin: 0.2rem 0 1.4rem;
}
.vr-byline span + span::before { content: " · "; opacity: 0.55; }
/* ARCH autoresearch pages — the animated ARCH logo pasted inline at the
top of the abstract block (see the vibe-research SKILL, "ARCH
autoresearch threads"). Height only; width follows the SVG's cropped
viewBox (~0.9:1). */
.vr-arch-logo {
display: block;
height: 150px;
width: auto;
margin: 0 auto 0.9rem;
}
/* Lab block — the run's hyperparameters / metadata, set tight and
monospaced so it reads as data, not prose. */
.vr-lab {
background: rgba(44, 106, 29, 0.07);
border-left: 3px solid var(--h2);
padding: 0.8rem 1rem;
margin: 1rem 0 1.5rem;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.86rem;
line-height: 1.55;
}
.vr-lab dl {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 1.1rem;
row-gap: 0.15rem;
margin: 0;
}
.vr-lab dt { color: var(--h3); }
.vr-lab dd { margin: 0; font-variant-numeric: tabular-nums; }
/* Figures — full content width, light-mode background. Wide figures
(comparison panels, multi-axis grids) can break out of the 720px
reading column by adding .breakout. */
.vr-fig { margin: 1.5rem 0 0.5rem; }
.vr-fig.breakout {
/* Push the figure out to ~1080px on wide viewports; collapse back to
column width on narrow ones. */
margin-left: calc(-1 * (min(1080px, 95vw) - 720px) / 2);
margin-right: calc(-1 * (min(1080px, 95vw) - 720px) / 2);
max-width: min(1080px, 95vw);
}
.vr-fig img {
display: block;
width: 100%;
background: #ffffff; /* always-light figure ground */
border: 1px solid var(--h3);
border-radius: 4px;
}
.vr-fig figcaption {
margin-top: 0.5rem;
font-size: 0.88rem;
line-height: 1.5;
color: var(--text);
padding-left: 0.7rem;
border-left: 1px solid var(--h3);
}
.vr-fig figcaption b { color: var(--h2); font-weight: 600; }
/* Pull quote — same tone as the link orange, italic, hairline rules
above and below; used for the one-sentence "headline" of a result. */
.vr-pull {
border-top: 1px solid var(--h3);
border-bottom: 1px solid var(--h3);
padding: 0.8rem 0;
margin: 1.5rem 0;
font-style: italic;
color: var(--link);
font-weight: 500;
text-wrap: balance;
}
/* Findings table — monospaced, tabular-nums, with a heavy rule under
the header and hairlines between rows. */
.vr-table-wrap { overflow-x: auto; }
.vr-table {
width: 100%;
border-collapse: collapse;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.86rem;
font-variant-numeric: tabular-nums;
margin: 1rem 0 1.5rem;
}
.vr-table th,
.vr-table td {
padding: 0.45rem 0.7rem;
text-align: left;
vertical-align: top; /* keys stay on the first line of wrapping cells */
border-bottom: 1px solid rgba(44, 106, 29, 0.25);
}
.vr-table th {
font-size: 0.74rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
color: var(--h3);
border-bottom: 1px solid var(--h2);
}
.vr-table td.num { text-align: right; }
.vr-pos { color: var(--h2); font-weight: 600; } /* matches a positive heading green */
.vr-neg { color: var(--link); font-weight: 600; } /* the same orange used for warnings */
/* Centre the long-form article body within the 720px column.
The parent style.css gives .align-left a max-width of 82% with
margin-right:auto only — which "hugs the left" (right behaviour on
the main page where it pairs with a centred abstract block). For
long-form vibe-research articles the prose reads better centred
within the column, so the .vr-prose wrapper opts back in to
left+right auto margins. */
.align-left.vr-prose {
margin-left: auto;
margin-right: auto;
}
/* Math-y inline atoms — italic variables get the same weight as
surrounding text, and sub/sup don't disrupt line height. */
.vr-prose i, .vr-fig figcaption i { font-style: italic; }
.vr-prose sub, .vr-prose sup,
.vr-fig figcaption sub, .vr-fig figcaption sup { font-size: 0.72em; line-height: 0; }
/* Section ribbon — small uppercase section labels, like "§2", that
sit above an h2 in the article body. */
.vr-section-num {
display: block;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.7rem;
letter-spacing: 0.14em;
color: var(--link);
margin-bottom: 0.1rem;
}
/* Colophon — small mono block at the foot of an article. */
.vr-colophon {
margin-top: 3rem;
padding-top: 0.9rem;
border-top: 1px solid var(--h3);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.78rem;
color: var(--h3);
line-height: 1.55;
}
.vr-colophon a { color: var(--h3); }
/* Correction / update note — a visually loud box for post-publication
corrections. Purple rail (the action colour) so it can't be missed,
but body-ink text so it reads as prose, not error. */
.vr-update {
border-left: 4px solid var(--action, #c70053);
background: color-mix(in srgb, var(--action, #c70053) 6%, transparent);
padding: 0.7rem 1rem;
margin: 1.4rem 0;
border-radius: 0 4px 4px 0;
}
.vr-update > :first-child { margin-top: 0; }
.vr-update > :last-child { margin-bottom: 0; }
.vr-update .vr-update-tag {
font-family: var(--mono, monospace);
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--action, #c70053);
font-weight: 700;
}
/* Retracted claim — struck through but left legible for the record. */
.vr-retracted {
text-decoration: line-through;
text-decoration-color: var(--action, #c70053);
text-decoration-thickness: 1.5px;
opacity: 0.75;
}
/* ── Collapsible folds (idea logs, historical tables) ─────────────────── */
.vr-fold { margin: 0; }
.vr-fold > summary {
cursor: pointer;
list-style: none;
position: relative;
padding-left: 1.15em;
}
.vr-fold > summary::-webkit-details-marker { display: none; }
.vr-fold > summary::before {
content: "\25B8"; /* ▸ */
position: absolute;
left: 0;
top: 0.05em;
color: #1a6b06; /* h2 green */
transition: transform 0.15s ease;
}
.vr-fold[open] > summary::before { transform: rotate(90deg); }
.vr-fold > summary:hover { background: rgba(26, 107, 6, 0.06); }
.vr-fold-verdict {
display: block;
font-size: 0.85em;
opacity: 0.78;
margin-top: 0.15em;
font-weight: 400;
}
.vr-fold-block { margin: 1.2em 0; }
.vr-row-win td { font-weight: 650; }
/* Interactive-figure tooltip (hover a mark -> preview of the underlying
datapoints; click pins, click-away/Esc dismisses). Generic: the JS sets
the sprite image per figure; cells default to 56px sprite tiles. */
.vr-itip {
position: fixed;
z-index: 60;
background: var(--bg, #f0f5dd);
border: 1px solid var(--h3, #1a6b06);
border-radius: 6px;
padding: 0.5rem 0.6rem 0.6rem;
box-shadow: 0 6px 22px rgba(31, 51, 24, 0.22);
pointer-events: none;
max-width: 280px;
}
.vr-itip-head { font-family: monospace; font-size: 0.78rem; font-weight: 700; }
.vr-itip-comp { font-family: monospace; font-size: 0.72rem; color: #7b8074; margin: 0.1rem 0 0.4rem; }
.vr-itip-grid { display: grid; grid-template-columns: repeat(4, 56px); gap: 3px; }
.vr-itip-cell {
width: 56px; height: 56px;
background-repeat: no-repeat;
border: 1px solid rgba(31, 51, 24, 0.18);
border-radius: 3px;
background-color: #fff;
}
.vr-itip-pin { font-family: monospace; font-size: 0.66rem; color: #7b8074; margin-top: 0.35rem; }
/* Hierarchy figure nodes */
.vr-fig svg { width: 100%; height: auto; display: block; }
/* --- tabbed figure: an in-figure selector bar (e.g. a checkpoint toggle) that reads
as part of the figure, sharing its border, rather than floating above it --- */
.vr-figtabs {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 7px 9px;
background: rgba(44, 106, 29, 0.06);
border: 1px solid var(--h3);
border-bottom: none;
border-radius: 4px 4px 0 0;
}
.vr-figtabs-label {
font-family: var(--mono, monospace); font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em; color: #7b8074; margin-right: 2px;
}
.vr-figtab {
font: inherit; font-size: 0.82rem; cursor: pointer;
padding: 3px 11px; border: 1px solid var(--h3);
background: transparent; color: var(--text); border-radius: 5px;
transition: background 0.12s ease, color 0.12s ease;
}
.vr-figtab:hover { background: rgba(44, 106, 29, 0.12); }
.vr-figtab.active { background: var(--h3); color: #fff; }
.vr-figtabbed .hwrap svg {
border: 1px solid var(--h3); border-top: none; border-radius: 0 0 4px 4px;
background: #fafcf2;
}
#hier-svg .hn:hover .hn-outline, #hier-svg .hn.pinned .hn-outline {
stroke-width: 2.4;
}
/* CIFAR hierarchy nodes (mirror of #hier-svg .hn) */
#chier-svg .chn:hover .chn-outline, #chier-svg .chn.pinned .chn-outline { stroke-width: 2.4; }
/* STL hierarchy nodes */
#shier-svg .shn:hover .shn-outline, #shier-svg .shn.pinned .shn-outline { stroke-width: 2.4; }
/* Vertical (Tiny ImageNet) hierarchy nodes */
#vhier-svg .vhn:hover .vhn-outline, #vhier-svg .vhn.pinned .vhn-outline { stroke-width: 2.2; }
/* factored-kernel: inline quoted document snippets (register examples) */
.vr-quote {
font-style: italic;
color: var(--h3);
font-size: 0.94em;
}
/* Verbatim code listings (arch threads etc.) */
.vr-code {
margin: 1.2em 0;
padding: 0.9em 1.1em;
background: rgba(26, 107, 6, 0.045);
border: 1px solid var(--h3, #2c6a1d);
border-radius: 4px;
overflow-x: auto;
font-size: 0.78em;
line-height: 1.45;
}
.vr-code code { white-space: pre; }
/* click-through browser: list of items left, detail panel right */
.vr-browse {
display: flex;
gap: 0;
border: 1px solid var(--h3);
border-radius: 4px;
background: #fafcf2;
min-height: 340px;
font-size: 0.82em;
}
.vr-browse-list {
flex: 0 0 200px;
max-height: 430px;
overflow-y: auto;
border-right: 1px solid var(--h3);
}
.vr-browse-item {
padding: 0.38em 0.6em;
cursor: pointer;
border-bottom: 1px solid color-mix(in srgb, var(--h3) 25%, transparent);
line-height: 1.3;
}
.vr-browse-item:hover { background: color-mix(in srgb, var(--h3) 10%, transparent); }
.vr-browse-item.active { background: color-mix(in srgb, var(--h3) 18%, transparent); font-weight: 600; }
.vr-browse-item .vr-browse-ba { float: right; font-variant-numeric: tabular-nums; }
.vr-browse-item .vr-browse-sub { display: block; font-size: 0.85em; opacity: 0.65; font-weight: 400; }
.vr-browse-panel {
flex: 1 1 auto;
padding: 0.7em 1em;
max-height: 430px;
overflow-y: auto;
line-height: 1.45;
}
.vr-browse-panel h4 { margin: 0 0 0.3em; font-size: 1em; }
.vr-browse-panel .vr-browse-expl { font-style: italic; margin-bottom: 0.5em; }
.vr-browse-panel .vr-browse-targets { font-family: var(--mono, monospace); font-size: 0.85em; opacity: 0.8; margin-bottom: 0.6em; }
.vr-browse-panel .vr-browse-ex { font-family: var(--mono, monospace); font-size: 0.85em; padding: 0.3em 0.45em; margin-bottom: 0.35em; background: color-mix(in srgb, var(--h3) 7%, transparent); border-radius: 3px; }