Filed
Notes

The Bureau of Bureaus is a 1962 ministry corridor translated into a browser. Its joke is structural, not decorative: scrolling becomes a privilege administered through tickets, paperwork, authentication and departmental routing. Every absurd sentence is presented in the calm voice of a competent civil servant. That contrast lets the page stay funny without resorting to parody graphics or novelty icons.

The visual spine comes from physical things a ministry handles: manila folders, carbon copies, violet ink, enamel doors, ruled forms and fluorescent ceiling light. The page alternates paper-colored and institutional green rooms so the long journey feels architectural. Sharp borders, double rules and offset shadows keep every object printable and tactile.

The queue in index.html is controlled by activeDelay() in main.js. It counts only while the document is visible, cycles through Q-414 to Q-417, and calls completeStep() after three deliberate seconds. updateWorkflow() then releases exactly one checkpoint while addFiledRecord() leaves a permanent folder in the visible stack.

Validation lives in validateForm(). It requires a called ticket, a working name, an imaginary desk, a maiden anagram, a stated ground and Tuesday certification. The seal cannot take ink before the form is filed, and no door routes an unsealed intention. Pointer Events drive dragging; rectsOverlap() checks the pad and target, while keyboard or touch activation performs the same two-stage action.

No image files are used. Perspective rays in the entrance are thin positioned elements converging on one vanishing point. Doors, ticket machine, stamp, ink pad and layered forms are built from borders, gradients and pseudo-elements in styles.css. The organization chart combines accessible HTML nodes with a responsive inline SVG reporting loop. A tiny data-URI SVG turbulence layer supplies paper grain without making a network request.

The opening uses two coded corridor shutters and a crooked “FILE OPENED” impression before copy, machine and ledger arrive on distinct vectors. Later motion communicates state: the ticket emerges, files cascade into a persistent rack, the ink route arms, the desk thumps on approval and the lunch plaque jumps offices. The optional service bell calls dispatchExpedite(), firing a coded pneumatic canister across the viewport before a denial slip returns. Reduced motion replaces these journeys with direct state changes. JavaScript has no continuous animation loop.

Archivo carries the officious display voice at weights 800 and 900, with tight tracking and compressed line-height. IBM Plex Mono handles forms, annotations, status readouts and body copy. Both are self-hosted from the shared font library. The palette tokens are manila #d9c9a3, ministry green #4a5d4f, stamp red #a33d38, violet #684c67 and carbon blue #32566d. Fluorescent pallor #e7ead8 lights the corridor.

Prompt an AI agent with a material world, an institutional voice and one interaction that turns the site’s subject into its navigation. Ask for pure HTML, CSS and JavaScript, self-hosted type, visible validation, keyboard equivalents, reduced-motion fallbacks and a screenshot review at phone, tablet and desktop widths. Require every prop to be code, every status to have real copy and every completed action to produce satisfying state feedback.