The First Lossless Deck, in Three Modes

Why Care?

Yesterday this site had a pattern on paper and an outline for a talk. Today the talk plays. Open it in a browser, press the down arrow, and it behaves like a presentation. It snaps slide to slide, keeps count, and remembers where you are in the URL, but it's plain HTML and CSS you can link to, reorder, or regenerate.

It also comes in three moods. The Lossless brand only ever had one look, dark with a cyan-to-orange gradient. Now the same deck can read like a vintage annual report on newsprint, or turn up into gradient glass that glows. One keystroke switches between them.

What's New?

• The first deck: Transformative Highlights from an AI + Agents + Human Collaboration, 13 slides in a "field notes" voice, at /presentations/ai-agents-human-collaboration. Its slides:

  • the opening story

  • the paradigm shift, and how fast the ground moved

  • two years by the numbers, and the VC work

  • the studies shelf

  • what coding agents can and can't be relied on for

  • Augment-It's four versions

  • recommendations for harness engineering and for culture

• Three color modes for the whole site:

  • Light is a newspaper: newsprint, Newsreader serif, double rules, one oxblood accent, and no gradients.

  • Dark is the Lossless look as it has always been.

  • Vibrant turns the brand gradient into a glowing aura, glass cards, and radiant type.

• A deck player with keyboard control, a slide counter, deep links to any slide, fullscreen, and a chrome-off presenting view.

• A gallery card on the landing page, plus internal /brand-kit and /design-system reference pages.

The Story

We followed our own advice from yesterday: settle the words, then generate the whole deck at once. All 13 slides came out of one pass over the outline, composed against a shared type vocabulary rather than invented slide by slide. The outline's still-unslotted ideas didn't make it in:

• the loose "Ideas" bullets

• the strategy recommendations added after generation

The modes took more judgment than code. The brief was clear: light should feel like "a vintage financial report, annual investor update" and shun the gradients, and vibrant should lean into them. So light mode doesn't just recolor. It swaps the typeface to a serif, squares the corners, and collapses every gradient token to solid ink. The same gradient-text word that glows in vibrant simply prints in light.

Two bugs surfaced on the way, both the silent kind:

An inline style was locking every mode to one palette. The site layout set the brand colors directly on <html>:

<html data-theme={SITE_MODE} style={`--primary:${brand.colors.primary};…`}>

An inline style outranks every stylesheet rule, so no [data-theme] block could ever change those three colors. The values matched dark mode exactly, which is why nobody noticed. Removing it changed nothing on screen today and unblocked every other mode.

Tailwind variants don't reach component classes. Our first "How fast the ground moved" slide used vibrant:deck-card to turn figures into glass cards in vibrant mode. In Tailwind v4, variants only apply to real utilities, not classes defined in @layer components, so the styles would have quietly never appeared. The fix is a .deck-panel class that owns its per-mode look in CSS. A scan now confirms no slide puts a variant on a component class.

Then we looked at it: a production build, served locally, and headless Chromium screenshots of the cover, the "ground moved" slide, and the can/can't slide in each mode. Deep links landed on the right slides, and each mode read as its own register. The remaining ten slides, phone widths, and the keyboard controls still need a human pass.

How It Works

src/pages/presentations/ai-agents-human-collaboration/index.astro   ← the deck page (v1)
  └─ <DeckLayout>                     full-screen document, no site header
       ├─ <PageDeck>                  the player
       │    ├─ <S01Cover />           one component per slide
       │    └─ … <S13Close />         src/layouts/sections/ai-agents-human-collaboration/v1/
       └─ <DeckChrome>                gallery link · version cycling · ↑ ↓ · mode toggle
src/lib/decks.ts                      registry: decks and their versions
src/styles/deck.css                   deck type scale in --deck-* tokens, one place to tune
src/styles/tokens.css                 light, dark, and vibrant mode tokens

The player started from calmstorm-decks' working version. It keeps what proved out: snapping, #s-N deep links, and events that let the chrome drive it without reaching in. It fixes what reading the code turned up:

• Modifier keys now pass through, so Cmd+C copies instead of hiding the chrome.

• Space works.

• Tall slides scroll through their content before advancing.

• Chrome colors come from mode tokens.

• Reduced motion is respected.

• Listeners are released when Astro swaps the page.

The reader's chosen mode is stored and applied by a tiny inline script before first paint, so the page never flashes the wrong mode.

What's Next

• Walk the whole deck in all three modes, and on a phone, then decide: iterate v1 or regenerate a v2 without letting it see v1.

• Tune light mode's cover, where the wider serif wraps the title to five lines.

• A light-background variant of the Lossless mark, whose near-white parts wash out on newsprint.

• Slot the strategy recommendations and the remaining ideas into the outline.

• Bring the README's implementation status up to date.

Related

• [[2026-09-14_01]]

• [[PageDeck-Pattern-for-Slide-Focused-Astro-Knots-Sites]]

• [[Generate-Whole-Decks-and-Regenerate-Fresh]]

• [[Three-Modes-Derivation]]