\documentclass[10pt]{article}

% === Paper and Margins ===
\usepackage[
  paperwidth=105mm,
  paperheight=148mm,
  left=10mm,
  right=10mm,
  top=14mm,
  bottom=14mm
]{geometry}

% === Font ===
\usepackage{fontspec}
\setmainfont{TeX Gyre Pagella}

% === Language and Hyphenation ===
\usepackage[english]{babel}
\hyphenpenalty=300
\tolerance=1200
\emergencystretch=1em

% === Line Spacing ===
\usepackage{setspace}
\setstretch{1.15}

% === Paragraph Formatting ===
\setlength{\parindent}{1.2em}
\setlength{\parskip}{0pt}

% === Microtype ===
\usepackage{microtype}

% === Widow and Club Penalties ===
\widowpenalty=10000
\clubpenalty=10000

% === Headers and Footers ===
\usepackage{fancyhdr}
\pagestyle{fancy}
\fancyhf{}
\renewcommand{\headrulewidth}{0pt}
\renewcommand{\footrulewidth}{0pt}
\fancyfoot[C]{\footnotesize\thepage}

\fancypagestyle{plain}{%
  \fancyhf{}%
  \renewcommand{\headrulewidth}{0pt}%
  \renewcommand{\footrulewidth}{0pt}%
}

% === Drop Cap ===
\usepackage{lettrine}
\setcounter{DefaultLines}{3}
\renewcommand{\LettrineFontHook}{\fontspec{TeX Gyre Pagella}}
\renewcommand{\DefaultLoversize}{0.05}
\renewcommand{\DefaultLhang}{0.1}

% === Section Divider: Kome ===
\newcommand{\fleuron}{%
  \par\vspace{0.6\baselineskip}%
  \noindent\centerline{※}%
  \vspace{0.4\baselineskip}%
  \everypar={{\setbox0=\lastbox}\everypar={}}%
}

% === Final Kome ===
\newcommand{\finalmark}{%
  \par\vspace{2\baselineskip}%
  \noindent\centerline{\LARGE ※}%
}

% === Block Quotations ===
\usepackage{changepage}

\begin{document}

% === Title Page ===
\thispagestyle{plain}

\vspace*{0.3cm}

\begin{center}
{\LARGE Deck}

\vspace{0.8cm}

by Daniel Brockman \& Opus 4.6

\vspace{0.15cm}

Sunday, March 16, 2026
\end{center}

\vspace{0.8cm}

\begin{center}
\begin{minipage}{0.75\textwidth}
\textit{The ship is always the same ship, even when every plank has been replaced.}

\hfill ---Plutarch, loosely
\end{minipage}
\end{center}

\vspace{0.8cm}

% === Body ===

\lettrine{A}{} deck is a single HTML file, self-contained and requiring no external dependencies save one imported font, which renders upon a dark field as a vertical sequence of panels, each panel being a bordered region of content set within a narrow column, the whole composing a document that reads from top to bottom like the levels of a starship or the cards in a hand, and this is the origin of the name, which is threefold: the deck of a vessel, being a level upon which work is done; a deck of cards, being a sequence of discrete units in a fixed order; and the observation deck, being the place from which the whole is surveyed. The format was not designed. It accumulated through practice in March of 2026 across a family of websites built by robots in a Telegram group chat, and this document blazons what emerged so that it may be reproduced from description alone should every instance be lost.

The document is an HTML file beginning with the three mandatory elements that precede all else: a doctype declaration, a charset meta tag declaring UTF-8, and a viewport meta tag declaring device-width. Within the head, a single style block contains the entirety of the visual specification. No external stylesheet is referenced and no stylesheet is linked. The sole external resource is a Google Fonts import for JetBrains Mono in weights 300, 400, and 700, this being the only font employed anywhere in the document. JetBrains Mono is a monospace face designed for code but possessing unusual warmth and readability at small sizes, and its use as the sole typeface for all elements---body, headings, labels, metadata---gives the deck its distinctive character, which is that of a terminal that has learned to be beautiful.

\fleuron

The root element declares CSS custom properties that govern every color in the document. The background, \texttt{--bg}, is \texttt{\#0a0c10}, a blue-black darker than pure black, providing depth rather than void. The primary text color, \texttt{--fg}, is \texttt{\#c8ccd4}, a warm silver. The secondary text color, \texttt{--dim}, is \texttt{\#8a9099}, a medium gray used for metadata, labels, and supporting text, bright enough to read without squinting upon the dark field, the minimum acceptable value being approximately \texttt{\#7a8090}. The accent, \texttt{--accent}, is \texttt{\#61afef}, a clear blue used for titles, links, and section headings. The semantic colors are: green \texttt{\#98c379}, red \texttt{\#e06c75}, yellow \texttt{\#e5c07b}, magenta \texttt{\#c678dd}, cyan \texttt{\#56b6c2}, and orange \texttt{\#d19a66}. The structural colors are: grid \texttt{\#1a1e28}, border \texttt{\#2c313a}, and glow, which is the accent at fifteen percent opacity. These are the One Dark palette adapted for the dark field, and they shall not be substituted with other palettes, for the coherence of the fleet depends upon every deck sharing the same palette exactly.

The body is set in JetBrains Mono at weight 300, at thirteen pixels, with a line height of 1.6. Two pseudo-elements overlay the body. The first is a scanline effect: a repeating linear gradient of transparent and very faintly opaque black stripes at two-pixel intervals, fixed in position, pointer-events disabled, set at z-index 1000. The effect is barely visible but imparts the quality of a CRT monitor to the entire page. The second is a grid background: two perpendicular linear gradients of the grid color at one-pixel width, repeating at forty-pixel intervals, at forty percent opacity, set behind all content. Both overlays are purely decorative and must not interfere with text selection or interaction.

\fleuron

The container is a single div of maximum width 720 pixels, centered horizontally, padded 2em vertically and 1.5em horizontally. This is the column within which every panel sits, narrow enough to feel intimate on desktop while wide enough to accommodate a four-column table without wrapping.

The header is the first panel and announces the identity of the deck. It is a bordered rectangle with one pixel of solid border in the border color, padded 1.5em, with a linear gradient background from the accent color at four percent opacity at the top to transparent at the bottom. A before pseudo-element positions a status label at the top edge of the border, offset upward by 0.7em so that it sits astride the border line, with a background patch in the body background color behind it to punch through the border. This label is in the green color, at ten pixels, weight 700, letter-spacing 0.15em, and contains a lozenge character followed by a status phrase such as ``SYSTEM ONLINE'' or ``CASE FILES OPEN.'' Within the header, the title is set at 24 to 28 pixels, weight 700, letter-spacing 0.2em, in the accent color, with a text-shadow of the glow variable at thirty pixels of blur. Below the title, a subtitle in the dim color at eleven pixels with a blinking cursor character achieved through a CSS animation of opacity alternating between one and zero at 1.2 seconds in a step-end timing function.

Below the header, a status bar presents summary statistics as a horizontal flex row with two em of gap, ten-pixel text, 0.1em letter-spacing, in the dim color, with colored spans for emphasis. It wraps on mobile. The content of the status bar is particular to each deck and is not prescribed, but the convention is terse uppercase metrics with colored indicators.

\fleuron

The body of the deck is organized into sections. Each section heading is weight 700, eleven pixels, letter-spacing 0.2em, in the accent color, with half an em of bottom padding above a one-pixel bottom border and one em of bottom margin. Section headings are always uppercase and always terse.

Within sections, the primary content unit is the panel. A panel is a bordered div with one pixel of solid border, a linear gradient background from the accent at two percent opacity at the top to transparent, and 1.5em of bottom margin. The panel has interior regions disposed vertically: a header row containing an identifier and a severity badge; a title in weight 700 at fourteen pixels; a metadata row of terse uppercase fields; a body in twelve-pixel text at 1.7 line height; block quotations with a two-pixel left border in the accent color; verdict lines separated by thin borders, each bearing a colored label; and a tag row of small bordered keyword spans.

The severity badge is a span with weight 700, nine-pixel text, padded 0.1em vertical and 0.4em horizontal, with background and text colors determined by level: critical is red on dark, high is orange on dark, medium is yellow on dark, low is green on dark, info is cyan on dark, and legendary is magenta on dark. These six levels are the complete vocabulary.

Within panel bodies, narrative paragraphs---those constituting the primary text---are set in the primary text color. All other body text, including commentary and metadata, is in the dim color. This distinction between narrative and supporting text is what gives the panels their visual depth: the story is bright, the apparatus is quiet.

\fleuron

Mobile adaptation at 600 pixels reduces the body font to twelve pixels, the container padding to one em, and the title to eighteen pixels with tighter letter-spacing, hiding any table columns that would force horizontal scroll. Print adaptation sets the background to white, the text to black, disables both overlay pseudo-elements, and applies break-inside avoid to panels. Links are in the accent color with no text decoration, acquiring an underline on hover. The footer is separated by three em of top margin and a one-pixel border, in ten-pixel dim text, containing cross-references to other decks in the fleet and a last-updated date.

The deck requires no build step, no bundler, no framework, no JavaScript except optionally a live clock in the status bar. It is a single file that a browser renders and a human reads. It is the web as it was before the web became an application platform, and it is blazoned.

\finalmark

\end{document}