) sizes the track to its own max-content and blows the page
sideways. This is the single most common way a monospace layout breaks. */
.bp-row{display:flex; gap:2ch; flex-wrap:wrap; align-items:center}
.bp-stack{display:grid; grid-template-columns:minmax(0,1fr); gap:1rem}
.bp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(24ch,1fr)); gap:2ch}
/* ═══ §5 · PANEL ═══════════════════════════════════════════════════════════
…
A ruled box with the title notched into the top edge — the TUI window.
This is the no-JS version: the sides are 1px rules. Load the appendix
script (§12) to replace them with real ┌ ─ ┐ │ └ ┘ characters that reflow
at any width and draw themselves in on scroll. Everything else is
identical either way. */
.bp-panel{
position:relative;
border:1px solid var(--bp-rule);
padding:1.6rem 2ch 1.4rem;
margin:0 0 2.6rem;
}
.bp-panel[data-title]::before{
content:attr(data-title);
position:absolute; top:0; left:2ch; transform:translateY(-50%);
background:var(--bp-paper); padding:0 1ch;
font-family:'Silkscreen',monospace; font-size:.66rem; letter-spacing:.12em;
color:var(--bp-accent); white-space:nowrap;
}
.bp-panel--tight{padding:.9rem 1.5ch}
/* ═══ §6 · BUTTONS ═════════════════════════════════════════════════════════
The brackets are typed, not drawn. Exactly one primary per screen: it is
the only raised object, and it presses into its own shadow. */
.bp-btn{
font:inherit; cursor:pointer; padding:.22rem .6ch;
background:transparent; border:none; color:var(--bp-ink);
transition:color .12s;
}
.bp-btn::before{content:"[ "; color:var(--bp-rule)}
.bp-btn::after{content:" ]"; color:var(--bp-rule)}
.bp-btn:hover,
.bp-btn:hover::before,
.bp-btn:hover::after{color:var(--bp-accent)}
.bp-btn--primary{
background:var(--bp-accent); color:var(--bp-paper); font-weight:700;
box-shadow:3px 3px 0 var(--bp-shadow);
transition:transform .07s, box-shadow .07s;
}
.bp-btn--primary::before,
.bp-btn--primary::after{color:rgba(255,255,255,.55)}
.bp-btn--primary:hover{background:var(--bp-ink); color:var(--bp-paper)}
.bp-btn--primary:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--bp-shadow)}
.bp-btn--danger{color:var(--bp-err)}
.bp-btn--danger:hover{background:var(--bp-err); color:var(--bp-paper)}
.bp-btn--danger:hover::before,
.bp-btn--danger:hover::after{color:rgba(255,255,255,.55)}
.bp-btn--ghost{color:var(--bp-ink-3)}
.bp-btn--ghost:hover{color:var(--bp-accent)}
/* pointer-events:none, not just opacity — otherwise a disabled variant still
picks up its own :hover fill and paints faded text on a faded ground. */
.bp-btn[disabled]{opacity:.4; cursor:not-allowed; pointer-events:none}
/* ═══ §7 · FIELDS ══════════════════════════════════════════════════════════
Real inputs underneath, always — the ASCII is presentation, never
structure. Focus, tabbing and screen readers keep working. */
.bp-field{display:grid; gap:.3rem}
.bp-input{display:flex; align-items:center; border-bottom:1px dotted var(--bp-rule)}
.bp-input > b{color:var(--bp-rule); font-weight:400; transition:color .12s}
.bp-input:focus-within{border-bottom-color:var(--bp-accent)}
.bp-input:focus-within > b{color:var(--bp-accent)}
.bp-input input,
.bp-input select{
font:inherit; flex:1; min-width:0; border:none; background:transparent;
color:var(--bp-ink); padding:.25rem 1ch; appearance:none;
}
.bp-input input:focus,
.bp-input select:focus{outline:none}
.bp-input input::placeholder{color:var(--bp-ink-3)}
.bp-input--err{border-bottom-color:var(--bp-err)}
.bp-input--err > b{color:var(--bp-err)}
.bp-check{display:flex; gap:1ch; align-items:baseline; cursor:pointer; user-select:none; color:var(--bp-ink-2)}
.bp-check input{position:absolute; opacity:0; width:0; height:0}
.bp-check .bp-mark{color:var(--bp-rule); flex:none; letter-spacing:-.02em}
.bp-check input[type="checkbox"] + .bp-mark::after{content:"[ ]"}
.bp-check input[type="checkbox"]:checked + .bp-mark::after{content:"[×]"}
.bp-check input[type="radio"] + .bp-mark::after{content:"( )"}
.bp-check input[type="radio"]:checked + .bp-mark::after{content:"(•)"}
.bp-check input:checked + .bp-mark{color:var(--bp-accent)}
.bp-check input:focus-visible + .bp-mark{outline:2px solid var(--bp-accent); outline-offset:2px}
.bp-check:hover{color:var(--bp-ink)}
/* ═══ §8 · STATUS ══════════════════════════════════════════════════════════
✓ healthy
▲ degraded
✕ down
◦ draining
◐ deploying
Glyph + word + colour, every time. Drop any one and the row still reads —
in a screenshot, on a mono terminal, or to anyone who does not separate
red from green. */
.bp-pill{
display:inline-flex; gap:.7ch; align-items:baseline;
font-size:.74rem; text-transform:uppercase; letter-spacing:.06em;
}
.bp-pill::before{content:"‹"; color:var(--bp-rule)}
.bp-pill::after{content:"›"; color:var(--bp-rule)}
.bp-pill--ok{color:var(--bp-ok)}
.bp-pill--warn{color:var(--bp-warn)}
.bp-pill--err{color:var(--bp-err)}
.bp-pill--idle{color:var(--bp-ink-3)}
.bp-pill--info{color:var(--bp-second)}
/* ═══ §9 · TABLE ═══════════════════════════════════════════════════════════
…
The one place hairlines beat characters: a │ inside every cell fights the
column padding and falls out of step the moment a value gets wider. The
header rule is a CSS double border — the ═ of CP437, drawn in a way that
can never drift from the columns. Always wrap: wide content scrolls in its
own container so the page body never scrolls sideways. */
.bp-tablewrap{overflow-x:auto}
.bp-table{border-collapse:collapse; width:100%; font-size:.8rem; font-variant-numeric:tabular-nums}
.bp-table th{
text-align:left; padding:.35rem 1.5ch; white-space:nowrap;
font-family:'Silkscreen',monospace; font-weight:400; font-size:.64rem; letter-spacing:.1em;
color:var(--bp-ink-2); border-bottom:3px double var(--bp-ink-3);
}
.bp-table td{padding:.3rem 1.5ch; border-bottom:1px dotted var(--bp-rule)}
.bp-table th + th,
.bp-table td + td{border-left:1px solid var(--bp-rule)}
.bp-table tbody tr:last-child td{border-bottom:none}
.bp-table tbody tr{transition:background .12s}
.bp-table tbody tr:hover{background:var(--bp-accent-soft)}
.bp-table td.bp-num{text-align:right}
/* ═══ §10 · DATA ═══════════════════════════════════════════════════════════
…
and inside it:
accent secondary ok muted
Twelve characters are the whole vocabulary:
shading ░ ▒ ▓ █ density, heatmaps, spoilers
eighths ▁▂▃▄▅▆▇█ bars and sparklines
No SVG, no chart library. It copies into a terminal or a commit message
and still means the same thing. Always ship a legend with a shading ramp.
p99 latency ▁▂▂▃▂▄▆█▅▃▂▂▁ 318ms ▲
load ███████░░░ 70%
mon ███████▓▓▓▓▓▒▒▒▓▓▓▓█████
░ <40% ▒ 40–70% ▓ 70–90% █ >90% */
.bp-art{
margin:0; overflow-x:auto; white-space:pre;
font-size:.78rem; line-height:1.35; color:var(--bp-ink-2);
}
.bp-art b{color:var(--bp-accent); font-weight:400}
.bp-art i{color:var(--bp-second); font-style:normal}
.bp-art u{color:var(--bp-ok); text-decoration:none}
.bp-art s{color:var(--bp-ink-3); text-decoration:none}
/* duotone ramp from a single token — three weights, no extra colours */
.bp-s2{color:var(--bp-second)}
.bp-s2-mid{color:color-mix(in srgb, var(--bp-second) 55%, var(--bp-paper))}
.bp-s2-low{color:color-mix(in srgb, var(--bp-second) 28%, var(--bp-paper))}
/* ═══ §11 · RECALL ═════════════════════════════════════════════════════════
Question…
The spoiler is a real block of █ sized to the answer box and filled by the
appendix script. Without that script it stays a solid fill and still hides
the answer — it just will not erode. line-height:1 matters: at anything larger the block
characters leave seams and the answer leaks through before you reveal it.
Keep the answer aria-hidden until it is actually revealed. */
.bp-card{display:grid; gap:1.1rem}
.bp-card__q{font-size:.95rem; color:var(--bp-ink); min-height:4.4em; white-space:pre-wrap; max-width:none}
.bp-card__a{position:relative; min-height:5em}
.bp-card__at{font-size:.95rem; color:var(--bp-second); white-space:pre-wrap; user-select:none; max-width:none}
.bp-card__a[data-open="1"] .bp-card__at{user-select:auto}
.bp-spoil{
all:unset; position:absolute; inset:0; display:block; cursor:pointer; overflow:hidden;
font-family:inherit; font-size:1rem; line-height:1; white-space:pre; color:var(--bp-accent);
background:var(--bp-accent); /* solid fallback: covers the answer even with no JS */
}
.bp-spoil:hover{color:color-mix(in srgb, var(--bp-accent) 74%, var(--bp-paper))}
.bp-spoil:focus-visible{outline:2px solid var(--bp-ink); outline-offset:2px}
.bp-btn--ok{color:var(--bp-ok)}
.bp-btn--ok:hover{background:var(--bp-ok); color:var(--bp-paper)}
.bp-btn--ok:hover::before,.bp-btn--ok:hover::after{color:rgba(255,255,255,.55)}
.bp-btn--miss{color:var(--bp-err)}
.bp-btn--miss:hover{background:var(--bp-err); color:var(--bp-paper)}
.bp-btn--miss:hover::before,.bp-btn--miss:hover::after{color:rgba(255,255,255,.55)}
/* ═══════════════════════════════════════════════════════════════════════════
§12 · APPENDIX — optional JavaScript
───────────────────────────────────────────────────────────────────────────
Everything above works without this. Copy the block below into a .js file
only if you want the two things CSS genuinely cannot do: rails made of real
box-drawing characters, and the erosion animations.
── A · REAL CHARACTER FRAMES ──────────────────────────────────────────────
Turns into ┌─┤ TITLE ├──┐ with
│ down both sides. Horizontal rails are a long run of ─ clipped by
overflow. Vertical rails are a run of │ in a 1ch column, word-break
forcing one glyph per line, absolutely positioned so their 700 lines never
contribute height. Reflows at any width, no resize handler, no measuring.
Add this CSS alongside it:
.bp-panel.bp-framed{border:none; padding:0}
.bp-fr{display:flex; color:var(--bp-rule); white-space:nowrap;
line-height:1; user-select:none; font-size:1rem}
.bp-fr__h{flex:1 1 0; min-width:0; overflow:hidden}
.bp-fr__t{font-family:'Silkscreen',monospace; font-size:.66rem;
letter-spacing:.12em; color:var(--bp-accent); padding:0 .6ch}
.bp-fr__mid{position:relative; padding:0 1ch}
.bp-fr__v{position:absolute; top:0; bottom:0; width:1ch; overflow:hidden;
word-break:break-all; color:var(--bp-rule); line-height:1;
font-size:1rem; pointer-events:none}
.bp-fr__body{min-width:0; padding:1.1rem 1ch 1.2rem}
And this JS:
const H = '─'.repeat(700), V = '│'.repeat(700);
const rail = side => Object.assign(document.createElement('span'), {
className: 'bp-fr__v', textContent: V, ariaHidden: 'true'
});
document.querySelectorAll('.bp-panel').forEach(el => {
const t = el.dataset.title;
const top = document.createElement('div');
top.className = 'bp-fr';
top.innerHTML = t
? `┌─┤├${H}┐`
: `┌${H}┐`;
if (t) top.querySelector('.bp-fr__t').textContent = t;
const bot = document.createElement('div');
bot.className = 'bp-fr';
bot.innerHTML = `└${H}┘`;
const mid = document.createElement('div'); mid.className = 'bp-fr__mid';
const body = document.createElement('div'); body.className = 'bp-fr__body';
while (el.firstChild) body.appendChild(el.firstChild);
const l = rail(); l.style.left = 0;
const r = rail(); r.style.right = 0;
mid.append(l, body, r);
el.append(top, mid, bot);
el.classList.add('bp-framed');
});
Two traps worth knowing, both of which cost real debugging time:
· A vertical rail left in normal flow makes its container 700 lines tall.
It has to be absolutely positioned; overflow:hidden does not cap height.
· Never position a rail with a magic offset like left:26ch. `ch` resolves
against the element's own font-size, so a rail at 1rem and a sidebar at
.78rem disagree and the rail lands in the middle of the content. Put it
in a stretching flex slot and let layout place it.
── B · SPOILER EROSION ────────────────────────────────────────────────────
Each cell walks down the ramp on its own schedule, so the block breaks up
instead of wiping. Fill first, then dissolve on click.
const RAMP = [' ', '░', '▒', '▓', '█'];
function fill(spoil){ // size the block to its box
const probe = document.createElement('span');
probe.style.cssText = 'position:absolute;visibility:hidden;white-space:pre';
probe.textContent = '0'.repeat(50);
spoil.appendChild(probe);
const w = probe.getBoundingClientRect().width / 50 || 9;
probe.remove();
const lh = parseFloat(getComputedStyle(spoil).lineHeight) || 16;
const cols = Math.ceil(spoil.clientWidth / w);
const rows = Math.ceil(spoil.clientHeight / lh);
spoil.dataset.cols = cols; spoil.dataset.rows = rows;
spoil._seed = Array.from({length: cols * rows}, Math.random);
spoil.textContent = Array.from({length: rows}, () => '█'.repeat(cols)).join('\n');
}
function dissolve(spoil, done, dur = 680){
const cols = +spoil.dataset.cols, rows = +spoil.dataset.rows, t0 = performance.now();
(function step(now){
const p = Math.min(1, (now - t0) / dur);
let out = '';
for (let y = 0; y < rows; y++){
for (let x = 0; x < cols; x++){
const local = Math.max(0, Math.min(1, (p - spoil._seed[y * cols + x] * 0.55) / 0.45));
out += RAMP[4 - Math.round(local * 4)];
}
out += '\n';
}
spoil.textContent = out;
p < 1 ? requestAnimationFrame(step) : (spoil.hidden = true, done && done());
})(t0);
}
── C · TEXT SHRED ─────────────────────────────────────────────────────────
Swaps card text out and the next one in. Spaces and newlines are never
replaced — touch them and the line wrapping jumps while it animates.
const GRIT = '░▒▓█╬╦╣═║┼+*·';
function scramble(el, text, dir, dur, done){ // dir: 'out' | 'in'
const seed = Array.from(text, Math.random), t0 = performance.now();
(function step(now){
const p = Math.min(1, (now - t0) / dur);
let out = '';
for (let i = 0; i < text.length; i++){
const c = text[i];
if (c === ' ' || c === '\n') { out += c; continue; }
const local = Math.max(0, Math.min(1, (p - seed[i] * 0.5) / 0.5));
const gone = dir === 'out' ? local : 1 - local;
out += gone > 0.72 ? ' '
: gone > 0.02 ? GRIT[(Math.random() * GRIT.length) | 0]
: c;
}
el.textContent = out;
p < 1 ? requestAnimationFrame(step)
: (el.textContent = dir === 'out' ? text.replace(/\S/g, ' ') : text, done && done());
})(t0);
}
Wrap all three in a prefers-reduced-motion check and jump to the end state:
const STILL = matchMedia('(prefers-reduced-motion: reduce)').matches;
═══════════════════════════════════════════════════════════════════════════ */