BUILDING
ON RESERVE

The browser becomes an emergency appliance.

BLACKOUT treats its interface as one more object caught in Verlicht’s 155-minute outage. It boots from a dead screen, transfers to a fictional backup bus, then spends that charge as the reader moves through the archive. The premise turns a familiar scroll-progress indicator into narrative pressure: decoration is a luxury, legibility is essential, and the final three percent belongs to the testimony.

The writing uses an oral-history register rather than a disaster spectacle. Eleven invented residents remember warm bread, a newborn lit by a flashlight, strangers in a lift, and the first downtown stars in decades. The substation explanation is intentionally plain. The emotional hinge arrives at 05:47, when ordinary electric noise returns and feels, briefly, like a loss.

Graceful degradation, performed honestly.

The opening failure is the .boot-sequence layer in index.html. CSS keyframes scanDie and bootFlicker collapse one bright pixel line, interrupt the grid message, and reveal the page after JavaScript adds .is-booted. Under reduced motion, the layer disappears and content is immediately visible.

In main.js, getCharge() converts scroll position into a 100-to-3 percent reserve. renderCharge() scales the segmented battery, writes a useful aria-valuetext, and applies three body states. At 68 percent, .load-low pauses ornamental keyframes. At 38 percent, .load-dim reduces the brightness and saturation of code-drawn portraits, diagrams, stars, and skyline. At 16 percent, .load-critical removes the grid and transfers panel text from Silkscreen to the already-loaded Archivo emergency face. Each threshold sends a live status notice. This is not hidden optimization theater.

Elias Noll’s testimony contains a second, reader-operated circuit. The native range control #skyDial remains fully keyboard accessible while renderSky() converts its streetlight load into the --glare custom property. That single value fades an amber skyline bloom, brightens the SVG constellation paths, and reveals eight additional CSS stars. The control does not merely decorate the story: lowering it lets the reader recreate the moment when the fictional Quiet Crown emerged over Meridian Square.

The candle chapters use no image files. Layered radial gradients form halos; clipped polygons form flames; a spring loop called flameFrame() gives the fine-pointer cursor mass and lag while updating local --flame-x and --flame-y light coordinates. That animation stops outside candle zones, pauses when the document is hidden, and is absent on touch devices and reduced-motion systems. The restoration switch reverses depletion, closes a fictional contactor, and lights twenty-four code-drawn city windows in stepped groups.