From 68c958ab9012d11b7de4e12735c45e1cc456a910 Mon Sep 17 00:00:00 2001
From: Ben Nicholson <ben@apointless.space>
Date: Thu, 20 Aug 2026 13:49:03 +1000
Subject: [PATCH] Upload files to "/"

---
 apointless.css | 293 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 293 insertions(+)
 create mode 100644 apointless.css

diff --git a/apointless.css b/apointless.css
new file mode 100644
index 0000000..fa9711d
--- /dev/null
+++ b/apointless.css
@@ -0,0 +1,293 @@
+/* apointless.css — dark-first design system
+   JetBrains Mono + DM Sans, blue accent, subtle grid. */
+
+:root {
+  --bg: #0b0d11;
+  --surface-1: #12151b;
+  --surface-2: #1a1e28;
+  --surface-3: #232838;
+
+  --border: #232838;
+  --border-strong: #313850;
+
+  --text: #e6e9ef;
+  --text-muted: #949cad;
+  --text-faint: #626a7a;
+
+  --accent: #3b82f6;
+  --accent-hover: #2f6fd8;
+  --accent-soft: rgba(59, 130, 246, 0.14);
+  --accent-line: rgba(59, 130, 246, 0.05);
+
+  --ok: #22c55e;
+  --warn: #f59e0b;
+  --error: #ef4444;
+  --info: #38bdf8;
+
+  --ok-soft: rgba(34, 197, 94, 0.13);
+  --warn-soft: rgba(245, 158, 11, 0.13);
+  --error-soft: rgba(239, 68, 68, 0.13);
+  --info-soft: rgba(56, 189, 248, 0.13);
+
+  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+
+  --radius-sm: 4px;
+  --radius: 8px;
+  --radius-lg: 12px;
+
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
+}
+
+html.light {
+  --bg: #f6f7f9;
+  --surface-1: #ffffff;
+  --surface-2: #f0f2f6;
+  --surface-3: #e3e7ee;
+
+  --border: #dfe3ea;
+  --border-strong: #c3cad6;
+
+  --text: #131720;
+  --text-muted: #5b6472;
+  --text-faint: #8a93a3;
+
+  --accent-soft: rgba(59, 130, 246, 0.11);
+  --accent-line: rgba(59, 130, 246, 0.06);
+
+  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.07);
+}
+
+* { box-sizing: border-box; }
+
+/* Any component with an explicit `display` beats the UA stylesheet's
+   [hidden] { display: none }, so .alert, .card etc. would stay visible when
+   marked hidden. Restore the expected behaviour once, globally. */
+[hidden] { display: none !important; }
+
+html, body { height: 100%; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 15px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image:
+    linear-gradient(var(--accent-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--accent-line) 1px, transparent 1px);
+  background-size: 32px 32px;
+}
+
+h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
+h1 { font-size: 1.25rem; }
+h2 { font-size: 1.05rem; }
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ---------------------------------------------------------------- card --- */
+
+.card {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.card-body { padding: 16px; }
+
+/* -------------------------------------------------------------- badges --- */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  border: 1px solid var(--border-strong);
+  background: var(--surface-2);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+.badge-ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
+.badge-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
+.badge-error { background: var(--error-soft); border-color: transparent; color: var(--error); }
+.badge-accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
+
+.dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  flex: none;
+}
+
+.dot-pulse { animation: pulse 2.4s ease-in-out infinite; }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+
+/* --------------------------------------------------------------- pills --- */
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 11px;
+  border-radius: 999px;
+  border: 1px solid var(--border-strong);
+  background: var(--surface-2);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+
+.pill:hover { background: var(--surface-3); color: var(--text); }
+.pill[aria-pressed="true"] {
+  background: var(--accent-soft);
+  border-color: transparent;
+  color: var(--accent);
+}
+
+/* ------------------------------------------------------------- buttons --- */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 9px 16px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border-strong);
+  background: var(--surface-2);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
+}
+
+.btn:hover:not(:disabled) { background: var(--surface-3); }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.btn-primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
+
+.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
+.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
+
+.btn-sm { padding: 5px 11px; font-size: 0.8rem; }
+
+/* -------------------------------------------------------------- inputs --- */
+
+.input {
+  width: 100%;
+  padding: 10px 13px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border-strong);
+  background: var(--surface-2);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+}
+
+.input::placeholder { color: var(--text-faint); }
+.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+
+.label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+/* -------------------------------------------------------------- alerts --- */
+
+.alert {
+  display: flex;
+  gap: 10px;
+  padding: 11px 14px;
+  border-radius: var(--radius);
+  border: 1px solid transparent;
+  font-size: 0.87rem;
+}
+
+.alert-error { background: var(--error-soft); border-color: rgba(239, 68, 68, 0.3); color: var(--error); }
+.alert-warn { background: var(--warn-soft); border-color: rgba(245, 158, 11, 0.3); color: var(--warn); }
+.alert-info { background: var(--info-soft); border-color: rgba(56, 189, 248, 0.3); color: var(--info); }
+
+/* ---------------------------------------------------------------- code --- */
+
+code, .mono { font-family: var(--font-mono); font-size: 0.85em; }
+
+.code-block {
+  padding: 12px 14px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  white-space: pre-wrap;
+  overflow-x: auto;
+}
+
+/* ------------------------------------------------------------- spinner --- */
+
+.spinner {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--accent);
+  animation: spin 0.7s linear infinite;
+  flex: none;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}