at z-index 5, so main naturally captures events first. */ canvas#net { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; } /* On the landing page

is mostly empty (only the overlay-text appears if the home Page has body content). Make main transparent to pointer events so clicks pass through to canvas#net, but re-enable interaction on its children so the overlay-text and any inner controls still work. */ body.cae-landing main { pointer-events: none; } body.cae-landing main > * { pointer-events: auto; } /* Static grain canvas — sits below canvas#net so on SPA-arrived pages the live (dissolved + glitching) canvas overlays it. On direct visits canvas#net isn't loaded, so this is the visible bg. */ canvas#cae-grain { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; } body.cae-landing canvas#cae-grain { display: none; } /* ========================================================================== Nav — vertical "Inspect class" rail (top-left, fixed) C.AE sits at the top in pink as a brand anchor; each route reads as a method on it, indented under a hairline rail. Below the 760px breakpoint the methods collapse behind a hamburger toggle. The whole shape stays in mono so it reads as a code API. ========================================================================== */ .cae-nav { position: fixed; top: 22px; left: var(--gutter); z-index: 10; font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; line-height: 1.75; user-select: none; /* Soft halo on landing so mono text reads against the canvas. */ text-shadow: 0 0 0 transparent; transition: text-shadow 600ms ease; } body.cae-landing .cae-nav { text-shadow: 0 0 8px rgba(0, 0, 0, 0.85); } .cae-nav__bar { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; } .cae-nav__home { display: inline-block; font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: 0.08em; color: var(--accent-pink); text-decoration: none; transition: color 160ms ease, transform 240ms ease; } .cae-nav__home:hover { color: var(--accent-pink); filter: brightness(1.15); } .cae-nav__home.is-active { color: var(--accent-pink); } /* Hamburger — visible only at narrow viewports. */ .cae-nav__toggle { display: none; width: 28px; height: 22px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; } .cae-nav__toggle-icon, .cae-nav__toggle-icon::before, .cae-nav__toggle-icon::after { content: ""; display: block; position: absolute; left: 0; width: 24px; height: 2px; background: var(--accent-pink); border-radius: 1px; transition: transform 220ms ease, opacity 160ms ease, top 220ms ease; } .cae-nav__toggle-icon { top: 10px; } .cae-nav__toggle-icon::before { top: -8px; } .cae-nav__toggle-icon::after { top: 8px; } .cae-nav.is-open .cae-nav__toggle-icon { background: transparent; } .cae-nav.is-open .cae-nav__toggle-icon::before { top: 0; transform: rotate(45deg); } .cae-nav.is-open .cae-nav__toggle-icon::after { top: 0; transform: rotate(-45deg); } .cae-nav__methods { list-style: none; padding-left: 1.4ch; border-left: 1px solid var(--rule-faint); margin-left: 0.4ch; } body.cae-landing .cae-nav__methods { border-color: rgba(230, 236, 255, 0.20); } .cae-nav__method { position: relative; padding-left: 1.4ch; } .cae-nav__method::before { content: ""; position: absolute; left: -0.4ch; top: 0.95em; width: 1.4ch; height: 1px; background: currentColor; opacity: 0.22; } body.cae-landing .cae-nav__method::before { opacity: 0.3; } .cae-nav__method a { display: inline-block; color: inherit; text-decoration: none; font-weight: 500; opacity: 0.78; transition: opacity 160ms ease, color 160ms ease, transform 240ms ease; } .cae-nav__method a:hover { opacity: 1; color: var(--accent-pink); } .cae-nav__method.is-active a { opacity: 1; color: var(--accent-pink); font-weight: 700; } .cae-nav__method.is-active::before { background: var(--accent-pink); opacity: 0.9; width: 2ch; left: -1ch; } /* The body.cae-pages li rule below adds margin-bottom for prose list items; reset it on the nav so pages-mode spacing matches the tighter landing-mode layout (line-height handles the spacing here). */ .cae-nav .cae-nav__method { margin-bottom: 0; } /* Narrow-viewport: collapse vertical menu behind a hamburger toggle. Methods list is hidden until the toggle flips aria-expanded. */ @media (max-width: 759px) { .cae-nav__toggle { display: block; } .cae-nav__methods { display: none; margin-top: 6px; padding: 8px 0 8px 1.6ch; background: rgba(184, 164, 151, 0.92); backdrop-filter: blur(6px); border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); } body.cae-landing .cae-nav__methods { background: rgba(4, 5, 11, 0.86); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); } .cae-nav.is-open .cae-nav__methods { display: block; } .cae-nav__method { padding-left: 1.4ch; padding-right: 14px; } } /* ========================================================================== Main column Centred in the viewport on viewports ≥ 760px; the fixed nav floats on top of the leftmost ~220px without inset-pushing the content. On narrow viewports the nav collapses to a hamburger and main gets a bumped top padding so content clears the toggle row. ========================================================================== */ main { position: relative; z-index: 5; /* Top padding clears the hamburger row at narrow viewports. */ padding: 76px var(--gutter) 96px; max-width: var(--measure); } @media (min-width: 760px) { /* Symmetric body padding so main centres on the viewport, not in the area to the right of the nav rail. The fixed nav floats on top of the content area; on viewports where they'd overlap (narrow desktops) the nav's text-shadow/translucent backdrop keeps it legible. */ body { padding-left: var(--gutter); padding-right: var(--gutter); } main { margin-inline: auto; padding-top: 64px; } } /* ========================================================================== Pages-mode typography Body in Athiti medium; all headings (h1/h2/h3) in Kode Mono. The h1 page titles ARE the API surface (.root(), .signals(), etc.) so keeping them in mono reinforces the "nav-as-code" conceit. h2 used as small-caps section labels, h3 as in-card titles. ========================================================================== */ body.cae-pages main { font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 1.6; } body.cae-pages h1 { font-family: var(--mono); font-weight: 600; font-size: 44px; letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 32px; color: var(--accent-pink-muted); text-align: right; opacity: 0.25; } body.cae-pages h1 code, body.cae-pages h1 .punct { color: var(--accent-pink-muted); } body.cae-pages h2 { font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-pink-muted); margin: 40px 0 16px; } body.cae-pages h3 { font-family: var(--mono); font-weight: 500; font-size: 20px; letter-spacing: 0.01em; margin: 26px 0 10px; color: var(--accent-pink-muted); } /* Markdown-authored content (admin-edited page bodies, signal bodies) follows conventional heading hierarchy — h1 > h2 > h3 — so non-technical authors get the result they expect from `## Heading`. The template-level h2 small-caps section-label style still applies to

outside of `.md-body`. / body.cae-pages .md-body h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; margin: 36px 0 12px; } body.cae-pages .md-body h3 { font-size: 20px; font-weight: 600; letter-spacing: 0; margin: 24px 0 8px; } body.cae-pages .md-body h4 { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-pink-muted); margin: 22px 0 6px; } body.cae-pages p, body.cae-pages li { margin-bottom: 14px; font-weight: 500; } / The global * { padding: 0 } reset zeros
/
's left padding so their markers fall outside the list box. Restore enough indent for the bullets to sit inside the reading column. / body.cae-pages ul, body.cae-pages ol { padding-left: 1.4em; } body.cae-pages li { padding-left: 0.2em; } body.cae-pages strong { font-weight: 700; } body.cae-pages em { font-style: italic; } body.cae-pages a { color: var(--accent-pink-muted); text-decoration-color: rgba(201, 49, 104, 0.4); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 160ms ease, text-decoration-color 160ms ease; } body.cae-pages a:hover { color: var(--accent-pink); text-decoration-color: var(--accent-pink); } body.cae-pages section { margin-bottom: 36px; } body.cae-pages article { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); } body.cae-pages code { font-family: var(--mono); font-size: 0.86em; background: rgba(20, 20, 20, 0.07); padding: 1px 6px; border-radius: 3px; letter-spacing: 0.02em; } body.cae-pages summary { cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-pink-muted); margin-top: 6px; } body.cae-pages summary:hover { color: var(--accent-pink); } / In-page sub-navs (e.g. signals bucket filters) — distinct from the top-level vertical rail. / body.cae-pages main > nav { display: flex; gap: 20px; margin: 8px 0 36px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } body.cae-pages main > nav a { text-decoration: none; opacity: 0.6; border-bottom: 1px solid transparent; padding-bottom: 2px; } body.cae-pages main > nav a:hover { opacity: 1; } body.cae-pages main > nav a[aria-current="page"] { opacity: 1; color: var(--accent-pink); border-bottom-color: var(--accent-pink); } / ========================================================================== Landing-only overlay text — stays mono, bottom-right ========================================================================== / .overlay-text { position: fixed; bottom: 18px; right: 22px; z-index: 7; max-width: 360px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-shadow: 0 0 8px rgba(0, 0, 0, 0.85); pointer-events: none; } / ========================================================================== Signals — vertical timeline / git-log inspired feed The temporal axis is rendered literally: a hairline rail runs down the left of the feed, with each signal attached as a marker. State reads from data-state on each .signal: future → hollow ring marker, slightly translucent body present → filled accent-pink marker, full opacity past → small dot marker, muted body The "now" line is a real divider between present and past. ========================================================================== / .signals-feed { position: relative; margin-top: 12px; padding-left: 28px; border-left: 1px solid var(--rule); } .signals-bucket { position: relative; margin-bottom: 36px; } .signals-bucket > h2 { margin: 0 0 14px; / Shift the bucket label slightly into the rail margin so it reads as an axis tick rather than an indented sub-heading. / margin-left: -28px; padding-left: 0; display: flex; align-items: baseline; gap: 12px; } .signals-bucket > h2::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--accent-pink-muted); opacity: 0.5; } .signal { position: relative; padding: 0 0 22px 0; margin-bottom: 14px; border-bottom: 1px solid var(--rule-faint); } .signal:last-child { border-bottom: 0; } .signal::before { content: ""; position: absolute; left: -34px; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-pink); box-shadow: 0 0 0 3px var(--bg-pages); transition: transform 240ms ease; } .signal[data-state="future"]::before { background: transparent; border: 1px solid var(--accent-pink-muted); width: 9px; height: 9px; } .signal[data-state="present"]::before { background: var(--accent-pink); / A subtle pulse ring for "now". / box-shadow: 0 0 0 3px var(--bg-pages), 0 0 0 5px rgba(255, 61, 128, 0.35); } .signal[data-state="past"]::before { background: var(--accent-pink-muted); width: 6px; height: 6px; opacity: 0.6; top: 0.7em; left: -32px; } .signal[data-state="future"] { opacity: 0.78; } .signal[data-state="present"] { opacity: 1; } .signal[data-state="past"] { opacity: 0.7; } .signalhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin-bottom: 6px; } .signaltitle { font-family: var(--mono); font-weight: 500; font-size: 18px; margin: 0; letter-spacing: 0.01em; line-height: 1.3; } .signaltitle a { color: var(--accent-pink-muted); text-decoration: none; } .signaltitle a:hover { color: var(--accent-pink); } .signaldate { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-pages); opacity: 0.7; white-space: nowrap; } .signalbody { font-size: 17px; font-weight: 500; } .signalbody p:last-child { margin-bottom: 0; } / Now-line divider — between present and past buckets, mono caption. / .signals-now { position: relative; margin: 8px -28px 28px; padding-left: 0; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-pink); } .signals-now::before, .signals-now::after { content: ""; flex: 1; height: 1px; background: var(--accent-pink); opacity: 0.5; } / Empty-bucket message / .signals-bucketempty { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-pages); opacity: 0.45; margin-bottom: 6px; } / Single-signal detail page / body.cae-pages .signal-detailback { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; } body.cae-pages .signal-detailback a { text-decoration: none; } body.cae-pages h1.signal-detailtitle { font-family: var(--mono); font-weight: 500; font-size: 36px; letter-spacing: -0.005em; line-height: 1.18; color: var(--accent-pink-muted); margin: 28px 0 12px; } body.cae-pages .signal-detaildate { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-pink-muted); margin-bottom: 32px; } body.cae-pages .signal-detail__body { font-size: 18px; } / ========================================================================== .public() — publications Each entry reads as a citation: title + year on one line, then the authors + venue, then a small meta row (type badge + DOI/PDF), then keywords as inline chips, then an expandable abstract. Filter form replaces default