Two-Line Drop-In Integration for Technical Specifications

By importing atelier.css and atelier.js, any HTML document supports explicit Fraunces 500 heading classes, Literata 440 body prose, 1px Quiet Hairline surfaces, and automatic syntax highlighting.

1. Automatic Syntax Highlighting with Focal Line Callouts

Add data-atelier-code, data-lang="rust", data-focal-lines="3", and data-verified-lines="5" to any <pre> element:

src/consensus.rs Auto-Highlighted by atelier.js

// Automatic client-side tokenization via dist/atelier.js
pub fn verify_quorum(epoch: u64, min_hlc: HlcTimestamp) -> Result<Arc<SnapshotPage>, ReadFallback> {
    let active = RING_BUFFER.load(Ordering::Acquire); // FOCAL: Highlighted via data-focal-lines="3"
    if active.hlc_watermark >= min_hlc {
        return Ok(Arc::clone(&active.page)); // Example condition: Highlighted via data-verified-lines="5"
    }
    Err(ReadFallback::RouteToQuorum)
}

Integration note

Focal and verified-line attributes select visual treatments. They do not establish evidence or verify this illustrative code. Apply heading classes explicitly.