/* ===========================================================================
splines — an out-of-box UI kit for Chelai
Every component reduced to its simplest form: a 1px stroke on warm paper.
Think of the strokes as splines — smooth curves through control points —
so corners round by default and lines want to flow. Shading is dither
(ordered Bayer tiles), never harsh fills; the pops are muted spot colors
spaced around the wheel by the golden angle (137.5°). Low contrast by design.
The whole system is driven by tokens on :root. Flip three knobs and the
entire kit follows:
data-theme="light|dark" ink on paper / paper on ink
data-corners="round|square" --r: 10px / --r: 0 (round is default)
data-stroke="solid|dashed|dotted" --bstyle
Framework-agnostic. No build step. Drop the stylesheet in, write plain
HTML with .sp-* classes. Icons are inline SVG with a matching 1.5px stroke.
=========================================================================== */
/* — surface stylesheets: the chat panel and the task workspace ride the same
tokens; one to this file loads the whole kit. — */
@import url("./chat.css?v=surface-3");
@import url("./workspace.css?v=surface-3");
@import url("./artifact.css?v=surface-3");
/* — bundled type: IBM Plex Sans (sans) + IBM Plex Mono (mono) — one family,
the IBM Plex look (as on minimax). Self-hosted woff2, no CDN, so the kit
stays CSP-safe and offline. Both are SIL OFL. — */
@font-face {
font-family: "IBM Plex Sans";
font-style: normal; font-weight: 400; font-display: swap;
src: url("./fonts/ibmplexsans-400.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal; font-weight: 500; font-display: swap;
src: url("./fonts/ibmplexsans-500.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal; font-weight: 600; font-display: swap;
src: url("./fonts/ibmplexsans-600.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal; font-weight: 700; font-display: swap;
src: url("./fonts/ibmplexsans-700.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal; font-weight: 400; font-display: swap;
src: url("./fonts/ibmplexmono-400.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal; font-weight: 600; font-display: swap;
src: url("./fonts/ibmplexmono-600.woff2") format("woff2");
}
:root {
/* — warm neutral scale: LibreChat's lightness steps (6d499ba3, MIT)
shifted onto Chelai's warm hue — warm white/greige surfaces, warm
greys for rules, warm near-black ink. Coral stays the one accent. — */
--ink: #262219; --ink-soft: #6b6355; --ink-faint: #a49b8a; --line: #cfc8bc;
--paper: #fbf9f6; --paper-2: #f5f3ed; --paper-sink: #ece8e0;
--gold: #c6892a; --teal: #2e9b91; --green: #6ba046; --flare: #e27370; --coral: #d1573c;
/* Coral is the brand's one accent, and the brand pairs it with cream —
chelai.dev serves exactly `#e27370` on `#faf5ea`. That pairing is
~2.8:1, under WCAG AA, and it is the design owner's deliberate choice:
a soft editorial coral, not a high-contrast control. Darkening the
coral to buy contrast took the product off-brand twice, so the trade
is recorded instead of hidden. TECH DEBT #110 */
--accent: #e27370; --accent-ink: #faf5ea; --ok: #5f9440; --warn: #bd8628; --bad: #cc5237;
/* Crisp font rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
--dither-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f7f2e5%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f7f2e5%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f7f2e5%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e3d6%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e3d6%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f7f2e5%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f7f2e5%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e3d6%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e3d6%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e3d6%22%2F%3E%3C%2Fsvg%3E");
--dither-sink: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e1cf%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e1cf%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d5cdbc%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e1cf%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d5cdbc%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d5cdbc%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e1cf%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e1cf%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d5cdbc%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e1cf%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d5cdbc%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d5cdbc%22%2F%3E%3C%2Fsvg%3E");
--dither-gold: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3C%2Fsvg%3E");
--dither-teal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3C%2Fsvg%3E");
--dither-green: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3C%2Fsvg%3E");
--dither-flare: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3C%2Fsvg%3E");
--dither-coral: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3C%2Fsvg%3E");
/* — playful, balanced spots (5), and dither built from interleaved-gradient
noise — imperfect on purpose, multi-tone, never a Bayer grid — */
/* — line mechanics — */
--bw: 1px;
--bw-hair: 0.75px;
--bstyle: solid;
--r: 10px;
--r-pill: 999px;
/* soft structural edge — a translucent ink for panel chrome, so large
borders read as a quiet division, not a hard black rule. Follows --ink,
so it themes automatically. */
--edge: color-mix(in srgb, var(--ink) 18%, transparent);
/* corner drift — how far corner furniture (title tags, spline nodes) slides
inward as --r grows past the default, so it stays inside the card outline
at full round. Zero at --r ≤ 14px, so the flush look is unchanged. */
--corner-inset: max(0px, calc((var(--r) - 14px) * 0.35));
/* nested radius — components INSIDE a card never inherit a deep round:
identical to --r up to 12px, then a soft slope (12% of the overshoot),
so the innards keep gaining a little roundness as the surfaces sweep
— component-shaped, never blobbed. */
--r-nest: calc(min(var(--r), 12px) + max(0px, var(--r) - 12px) * 0.12);
/* — type: IBM Plex Sans + IBM Plex Mono, bundled above — */
--font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
"IBM Plex Sans", Roboto, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
/* — motion, snappy — */
--ease: cubic-bezier(.2, .9, .2, 1);
--fast: 140ms;
--med: 200ms;
--space: 8px;
color-scheme: light dark;
}
/* Dark: lines become paper-white on near-black. Not a naive invert — the
ground keeps a faint warm bias and the accent lifts to stay legible. */
@media (prefers-color-scheme: dark) {
:root {
--ink: #ece7de; --ink-soft: #a49c8f; --ink-faint: #5c564b; --line: #48423a;
--paper: #151310; --paper-2: #211e19; --paper-sink: #2d2a24;
--gold: #e6b556; --teal: #4fc0b3; --green: #9ac267; --flare: #f0948e; --coral: #e57a5e;
--accent: #e8876e; --accent-ink: #14110c; --ok: #93c46f; --warn: #e0ad4f; --bad: #e57a5e;
--dither-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%232d2923%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%232d2923%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%232d2923%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23201c16%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23201c16%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%232d2923%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%232d2923%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23201c16%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23201c16%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E");
--dither-sink: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%231e1c17%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%231e1c17%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23110f0a%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%231e1c17%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23110f0a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23110f0a%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%231e1c17%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%231e1c17%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23110f0a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%231e1c17%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23110f0a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23110f0a%22%2F%3E%3C%2Fsvg%3E");
--dither-gold: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3C%2Fsvg%3E");
--dither-teal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3C%2Fsvg%3E");
--dither-green: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3C%2Fsvg%3E");
--dither-flare: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3C%2Fsvg%3E");
--dither-coral: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3C%2Fsvg%3E");
}
}
/* Explicit toggle wins over the media query, in both directions. */
:root[data-theme="light"] {
--ink: #262219; --ink-soft: #6b6355; --ink-faint: #a49b8a; --line: #cfc8bc;
--paper: #fbf9f6; --paper-2: #f5f3ed; --paper-sink: #ece8e0;
--gold: #c6892a; --teal: #2e9b91; --green: #6ba046; --flare: #e27370; --coral: #d1573c;
--accent: #e27370; --accent-ink: #faf5ea; --ok: #5f9440; --warn: #bd8628; --bad: #cc5237;
--dither-sink: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e1cf%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e1cf%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d5cdbc%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e1cf%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d5cdbc%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d5cdbc%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e1cf%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e1cf%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d5cdbc%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8e1cf%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d5cdbc%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d5cdbc%22%2F%3E%3C%2Fsvg%3E");
--dither-gold: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23cc953f%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23aa7624%22%2F%3E%3C%2Fsvg%3E");
--dither-teal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2343a59c%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2328857d%22%2F%3E%3C%2Fsvg%3E");
--dither-green: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%237aaa59%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%235c8a3c%22%2F%3E%3C%2Fsvg%3E");
--dither-flare: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e58481%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c26360%22%2F%3E%3C%2Fsvg%3E");
--dither-coral: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23d66850%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b44b34%22%2F%3E%3C%2Fsvg%3E");
}
:root[data-theme="dark"] {
--ink: #ece7de; --ink-soft: #a49c8f; --ink-faint: #5c564b; --line: #48423a;
--paper: #151310; --paper-2: #211e19; --paper-sink: #2d2a24;
--gold: #e6b556; --teal: #4fc0b3; --green: #9ac267; --flare: #f0948e; --coral: #e57a5e;
--accent: #e8876e; --accent-ink: #14110c; --ok: #93c46f; --warn: #e0ad4f; --bad: #e57a5e;
--dither-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%232d2923%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%232d2923%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%232d2923%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23201c16%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23201c16%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%232d2923%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%232d2923%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23201c16%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23201c16%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E");
--dither-sink: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%231e1c17%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%231e1c17%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23110f0a%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%231e1c17%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23110f0a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23110f0a%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%231e1c17%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%231e1c17%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23110f0a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%231e1c17%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23110f0a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23110f0a%22%2F%3E%3C%2Fsvg%3E");
--dither-gold: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e9bc67%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c69c4a%22%2F%3E%3C%2Fsvg%3E");
--dither-teal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2361c6bb%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2344a59a%22%2F%3E%3C%2Fsvg%3E");
--dither-green: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23a4c876%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%2384a759%22%2F%3E%3C%2Fsvg%3E");
--dither-flare: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23f2a19c%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ce7f7a%22%2F%3E%3C%2Fsvg%3E");
--dither-coral: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23e8876e%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23c56951%22%2F%3E%3C%2Fsvg%3E");
}
:root[data-corners="round"] { --r: 12px; }
:root[data-corners="square"] { --r: 0px; }
:root[data-stroke="solid"] { --bstyle: solid; }
:root[data-stroke="dashed"] { --bstyle: dashed; }
:root[data-stroke="dotted"] { --bstyle: dotted; }
/* --------------------------------------------------------------------------
base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background-color: var(--paper); /* the algorithmic GL field (gl/dither.js) draws the grain */
color: var(--ink);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
transition: background-color var(--med) var(--ease), color var(--med) var(--ease);
}
/* The line kit's shared border. Everything structural uses it, so the
stroke-style toggle propagates through --bstyle. */
.sp-line { border: var(--bw) var(--bstyle) var(--line); border-radius: var(--r-nest); }
/* Utility label — 11px medium uppercase, quiet tracking (the base UI's
section-label voice); mono stays for code, ids, and terminal content. */
.sp-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--ink-soft);
}
/* --------------------------------------------------------------------------
icons — 1.5px stroke, round caps, no fill. matches the components exactly.
-------------------------------------------------------------------------- */
.sp-ico {
width: 20px; height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: middle;
flex: none;
}
.sp-ico { stroke-width: 1.5; } /* tuned to sit with the 1px borders */
.sp-ico--sm { width: 16px; height: 16px; }
.sp-ico--lg { width: 28px; height: 28px; }
/* --------------------------------------------------------------------------
button
-------------------------------------------------------------------------- */
.sp-btn {
display: inline-flex; align-items: center; gap: 8px;
font: inherit; font-weight: 600;
padding: 9px 16px;
background: var(--paper-2);
color: var(--ink);
border: var(--bw) var(--bstyle) var(--line);
border-radius: var(--r-nest);
cursor: pointer;
transition: transform var(--fast) var(--ease),
background var(--fast) var(--ease),
color var(--fast) var(--ease);
}
.sp-btn:hover { background: var(--paper-sink); border-color: var(--ink-soft); }
.sp-btn:active { transform: scale(.97); }
.sp-btn:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* The primary CTA is a dithered flare fill on paper — the pop comes through
the screen, not as a flat block. Anything sitting on that screen needs the
halo: a ring of the accent's own colour behind the glyph, filling the
dither's gaps so the letterform meets solid colour instead of a stipple.
Text on a dithered fill without it is unreadable however good its nominal
contrast, because the noise lands *inside* the strokes. Defined here
because this is where the dithered fill is defined. */
.sp-btn--primary {
background-color: var(--accent); background-image: var(--dither-flare);
color: var(--accent-ink); border-color: var(--accent); font-weight: 700;
--accent-halo-color: var(--accent);
--accent-halo:
-2px 0 var(--accent-halo-color), 0 2px var(--accent-halo-color),
2px 0 var(--accent-halo-color), 0 -2px var(--accent-halo-color),
-1px -1px var(--accent-halo-color), 1px -1px var(--accent-halo-color),
-1px 1px var(--accent-halo-color), 1px 1px var(--accent-halo-color),
0 0 6px var(--accent-halo-color);
text-shadow: var(--accent-halo);
}
/* An icon is a stroked path, so it takes the halo as a drop-shadow filter
rather than a text-shadow — same ring, same reason. */
.sp-btn--primary svg {
filter:
drop-shadow(0 0 1px var(--accent-halo-color))
drop-shadow(0 0 2px var(--accent-halo-color));
}
.sp-btn--primary:hover { filter: brightness(.95); }
.sp-btn--ghost { background: transparent; border-color: transparent; }
.sp-btn--ghost:hover { background: transparent; color: var(--accent); border-color: transparent; }
.sp-btn--icon { padding: 9px; }
.sp-btn:disabled { opacity: .4; cursor: not-allowed; }
.sp-btn:disabled:hover { background: var(--paper-2); color: var(--ink); border-color: var(--line); }
.sp-btn:disabled:active { transform: none; }
/* --------------------------------------------------------------------------
form controls
-------------------------------------------------------------------------- */
.sp-field { display: flex; flex-direction: column; gap: 6px; }
.sp-input, .sp-textarea, .sp-select {
font: inherit;
color: var(--ink);
background: var(--paper-sink);
border: var(--bw) var(--bstyle) var(--line);
border-radius: var(--r-nest);
padding: 9px 12px;
width: 100%;
transition: border-color var(--fast) var(--ease),
box-shadow var(--fast) var(--ease),
background var(--fast) var(--ease);
}
.sp-input::placeholder, .sp-textarea::placeholder { color: var(--ink-faint); }
.sp-input:focus, .sp-textarea:focus, .sp-select:focus {
outline: none;
background: var(--paper-2);
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.sp-textarea { resize: vertical; min-height: 84px; }
.sp-select {
appearance: none;
background-image: none;
cursor: pointer;
}
/* checkbox & radio — hand-built so the box is a real 2px stroke */
.sp-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.sp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.sp-box {
width: 20px; height: 20px; flex: none;
border: var(--bw) var(--bstyle) var(--line);
border-radius: var(--r-nest);
display: grid; place-items: center;
transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.sp-check--radio .sp-box { border-radius: 999px; }
.sp-box svg { width: 14px; height: 14px; stroke: var(--accent-ink); stroke-width: 3;
fill: none; stroke-linecap: round; stroke-linejoin: round;
opacity: 0; transform: scale(.4); transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); }
.sp-check input:checked + .sp-box { background: var(--accent); border-color: var(--accent); }
.sp-check input:checked + .sp-box svg { opacity: 1; transform: scale(1); }
.sp-check input:focus-visible + .sp-box {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* toggle switch — a 2px capsule with a sliding ink knob */
.sp-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.sp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sp-track {
width: 44px; height: 24px; flex: none;
border: var(--bw) var(--bstyle) var(--line);
border-radius: var(--r-pill);
background: var(--paper-sink);
position: relative;
transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.sp-track::after {
content: ""; position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px; border-radius: 999px;
background: var(--ink);
transition: transform var(--med) var(--ease), background var(--fast) var(--ease);
}
.sp-switch input:checked + .sp-track { background: var(--accent); border-color: var(--accent); }
.sp-switch input:checked + .sp-track::after { transform: translateX(20px); background: var(--accent-ink); }
.sp-switch input:focus-visible + .sp-track {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* range slider */
.sp-range { width: 100%; height: 24px; appearance: none; background: transparent; cursor: pointer; }
.sp-range::-webkit-slider-runnable-track { height: 2px; background: var(--ink); }
.sp-range::-moz-range-track { height: 2px; background: var(--ink); }
.sp-range::-webkit-slider-thumb {
appearance: none; margin-top: -11px;
width: 22px; height: 22px; border-radius: var(--r-nest);
background: var(--paper-2); border: var(--bw) solid var(--line);
}
.sp-range::-moz-range-thumb {
width: 22px; height: 22px; border-radius: var(--r-nest);
background: var(--paper-2); border: var(--bw) solid var(--line);
}
/* --------------------------------------------------------------------------
containers & feedback
-------------------------------------------------------------------------- */
.sp-card {
background-color: var(--paper-2);
background-image: var(--dither-grain); /* paper grain — riso stock */
border: var(--bw) var(--bstyle) var(--line);
border-radius: var(--r); /* a surface — follows the full round */
padding: 18px;
}
/* card title tag — the catalog plates' treatment, promoted to the kit: a mono
.sp-label pinned in the card's top-left corner on sunk paper, so every card
carries its title the same way. Add `sp-card--tagged` to the card (it makes
room up top) and put the title in a `.sp-label.sp-card__tag` child. */
/* The tag is BONDED to the card's top-left corner at any radius: the card
clips it (overflow hidden), so its outer edge fuses with the card's curve,
and only the text inside drifts inward (via the growing padding) to stay
clear of a deep round. */
.sp-card--tagged { position: relative; overflow: hidden;
padding-top: calc(40px + var(--corner-inset) * 0.5); }
.sp-card__tag {
position: absolute; top: 0; left: 0; z-index: 1;
/* the tag ground shifts one step toward ink: darker than the card in light
mode, lighter in dark — the same one-step contrast in both themes */
background: color-mix(in srgb, var(--paper-2) 88%, var(--ink));
color: var(--ink-soft);
/* the label clears a deep round mostly by sliding right, only a little down,
so the tag stays shallow — up off the card's content */
padding: calc(4px + var(--corner-inset) * 0.5) 10px 4px calc(10px + var(--corner-inset) * 1.6);
letter-spacing: .16em;
border-bottom-right-radius: min(var(--r), 14px);
}
.sp-card__tag b { color: var(--ink); font-weight: 700; }
/* z-space — depth as a token. A surface wearing `sp-glass` carries --z, its
position on the z axis: 0 is flat on the paper (exactly the riso card), 1 is
fully forward — and the farther forward it sits, the more liquid glass it
becomes. The paper thins to a tint, the backdrop frosts through it, a light
catches the top edge, and it lifts on a soft shadow — all one linear ramp on
--z, so anything between reads as mid-flight. Spin a stack through depth and
cards glass up as they approach.
Refraction — the bezel that *bends* the backdrop (Snell, n = 1.5) — is the
one part CSS can't express: gl/liquid.js builds that as an SVG displacement
map and layers it on where it can render. Everything here is the always-on
baseline. */
.sp-glass {
--z: 0;
position: relative;
/* paper → tint: the ground all but disappears up front (16%-ish, like real
glass carrying only a breath of its own color) */
background:
color-mix(in srgb, var(--paper-2) calc(100% - var(--z) * 86%), transparent);
/* the stroke goes translucent-ink, glass-edge style, as --z rises */
border: var(--bw) var(--bstyle)
color-mix(in srgb,
var(--line) calc(100% - var(--z) * 100%),
color-mix(in srgb, var(--ink) 42%, transparent) calc(var(--z) * 100%));
/* the corners liquefy: a forward surface swells past the kit round */
border-radius: calc(var(--r) + var(--z) * 16px);
/* speculars — a hard top-edge light, a soft bloom under it, an under-lip
glow — plus the lift shadow, all scaled by --z */
box-shadow:
inset 0 1px 0 rgb(255 255 255 / calc(var(--z) * 55%)),
inset 0 2px 6px rgb(255 255 255 / calc(var(--z) * 32%)),
inset 0 -1px 0 rgb(255 255 255 / calc(var(--z) * 20%)),
0 calc(var(--z) * 10px) calc(var(--z) * 26px) rgb(24 19 12 / calc(var(--z) * 26%));
}
/* rim light — a masked conic ring riding the border, tuned by eye: bright at
the top-left and bottom-right the way a bezel catches light. Fades in with
--z; the mask keeps it to a 2px rim so the middle stays clear. */
.sp-glass::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
pointer-events: none; padding: 2px;
background: conic-gradient(from 210deg,
rgb(255 255 255 / 90%), rgb(255 255 255 / 0%) 22%,
rgb(255 255 255 / 38%) 50%, rgb(255 255 255 / 0%) 78%,
rgb(255 255 255 / 90%));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: var(--z);
}
/* forward surfaces read the backdrop through a frost — kit-only fallback when
gl/liquid.js isn't driving the full refraction chain (which bakes its own
blur in, and overrides this inline while it's live) */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.sp-glass {
-webkit-backdrop-filter: blur(calc(var(--z) * 2.5px)) saturate(calc(1 + var(--z) * 0.15));
backdrop-filter: blur(calc(var(--z) * 2.5px)) saturate(calc(1 + var(--z) * 0.15));
}
}
/* the tag chip goes translucent with its card, staying one step toward ink */
.sp-glass .sp-card__tag {
background: color-mix(in srgb,
color-mix(in srgb, var(--paper-2) 88%, var(--ink)) calc(100% - var(--z) * 45%),
transparent);
}
/* fixed depth steps, for when a layout wants levels rather than a live spin */
.sp-z1 { --z: 0.33; }
.sp-z2 { --z: 0.66; }
.sp-z3 { --z: 1; }
.sp-badge {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .1em;
padding: 3px 9px;
border: var(--bw) var(--bstyle) var(--line);
border-radius: var(--r-nest);
background: var(--paper-2);
}
.sp-badge--pill { border-radius: var(--r-pill); }
.sp-badge--accent { border-color: var(--accent); color: var(--accent); }
.sp-badge--ok { border-color: var(--ok); color: var(--ok); }
.sp-badge--warn { border-color: var(--warn); color: var(--warn); }
.sp-badge--bad { border-color: var(--bad); color: var(--bad); }
/* chip with a removable stroke */
.sp-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 6px 5px 12px; font-size: 13px; font-weight: 500;
border: var(--bw) var(--bstyle) var(--line); border-radius: var(--r-pill);
background: var(--paper-2);
}
.sp-chip button {
display: grid; place-items: center; width: 20px; height: 20px;
border: none; background: transparent; color: var(--ink-soft);
border-radius: 999px; cursor: pointer;
transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.sp-chip button:hover { color: var(--bad); }
/* callout / alert — no heavy semantic edge; the status reads through a faint
tint of the paper, the icon, and a control-point node in the status color at
the top-right corner (the same node every card wears). */
.sp-alert {
--al: var(--accent);
position: relative;
display: flex; gap: 12px; align-items: flex-start;
padding: 12px 14px;
border: var(--bw) var(--bstyle) var(--line);
border-radius: var(--r-nest);
background: color-mix(in srgb, var(--al) 7%, var(--paper-2));
}
.sp-alert::before {
content: ""; position: absolute;
top: calc(7px + var(--corner-inset)); right: calc(7px + var(--corner-inset));
width: 6px; height: 6px;
border-radius: var(--r-pill); background: var(--paper);
border: 1.5px solid var(--al); pointer-events: none;
}
.sp-alert > .sp-ico { color: var(--al); }
.sp-alert__title { font-weight: 700; margin: 0 0 2px; }
.sp-alert__body { margin: 0; color: var(--ink-soft); font-size: 14px; }
.sp-alert--info { --al: var(--accent); }
.sp-alert--ok { --al: var(--ok); }
.sp-alert--warn { --al: var(--warn); }
.sp-alert--bad { --al: var(--bad); }
/* progress — a dithered fill, not a hard bar */
.sp-progress {
height: 14px; border: var(--bw) var(--bstyle) var(--line);
border-radius: var(--r-pill);
background-color: var(--paper-sink); background-image: var(--dither-sink);
overflow: hidden;
}
.sp-progress__bar {
height: 100%;
background-color: var(--gold); background-image: var(--dither-gold);
transition: width var(--med) var(--ease);
}
/* avatar — initials inside a 2px ring */
.sp-avatar {
width: 40px; height: 40px; display: grid; place-items: center;
border: var(--bw) var(--bstyle) var(--line); border-radius: var(--r-pill);
background: var(--paper-2);
font-family: var(--font-mono); font-weight: 600; font-size: 14px;
}
/* tabs — active tab connects to the panel via a raised underline */
.sp-tabs { display: flex; gap: 0; border-bottom: var(--bw) var(--bstyle) var(--line); }
.sp-tab {
font: inherit; font-weight: 600; cursor: pointer;
background: transparent; border: none;
padding: 10px 16px; margin-bottom: calc(-1 * var(--bw));
border-bottom: var(--bw) solid transparent; color: var(--ink-soft);
transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.sp-tab:hover { color: var(--ink); }
.sp-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
/* accordion */
.sp-acc { border: var(--bw) var(--bstyle) var(--line); border-radius: var(--r-nest); overflow: hidden; }
.sp-acc__item + .sp-acc__item { border-top: var(--bw-hair) var(--bstyle) var(--ink-faint); }
.sp-acc__head {
width: 100%; display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 12px 14px; font: inherit; font-weight: 600;
background: transparent; border: none; color: var(--ink); cursor: pointer; text-align: left;
}
.sp-acc__head .sp-ico { transition: transform var(--med) var(--ease); color: var(--ink-soft); }
.sp-acc__item[open] .sp-acc__head .sp-ico { transform: rotate(45deg); color: var(--accent); }
.sp-acc__body { padding: 0 14px 14px; color: var(--ink-soft); font-size: 14px; }
/* table */
.sp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sp-table th, .sp-table td { text-align: left; padding: 9px 12px; border-bottom: var(--bw-hair) var(--bstyle) var(--ink-faint); }
.sp-table thead th {
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
color: var(--ink-soft); border-bottom: var(--bw) var(--bstyle) var(--line);
}
.sp-table tbody tr { transition: background var(--fast) var(--ease); }
.sp-table tbody tr:hover { background: var(--paper-sink); }
.sp-table td .tnum { font-variant-numeric: tabular-nums; }
/* tooltip */
.sp-tip { position: relative; display: inline-flex; }
.sp-tip__bubble {
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
white-space: nowrap; padding: 5px 10px;
border: var(--bw) var(--bstyle) var(--line); border-radius: var(--r-nest);
background: var(--ink); color: var(--paper);
font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
opacity: 0; pointer-events: none;
transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.sp-tip:hover .sp-tip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
/* --------------------------------------------------------------------------
Chelai chat surfaces — the OOB reason lines exists
-------------------------------------------------------------------------- */
.sp-msg { display: flex; gap: 12px; max-width: 68ch; }
.sp-msg__body {
border: var(--bw) var(--bstyle) var(--line);
border-radius: 18px 18px 18px 4px;
padding: 10px 14px; flex: 1;
background-color: var(--paper-2); /* plain paper — no dither in the bubbles */
}
.sp-msg--user { flex-direction: row-reverse; margin-left: auto; }
.sp-msg--user .sp-msg__body {
border-radius: 18px 18px 4px 18px;
background-color: var(--paper-sink);
}
/* thinking / working state chips — never a bare spinner (UI_INTERFACE §6.2) */
.sp-state {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 14px; border: var(--bw) var(--bstyle) var(--line);
border-radius: var(--r-pill); background: var(--paper-2);
font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
}
.sp-dots { display: inline-flex; gap: 4px; }
.sp-dots i { width: 5px; height: 5px; border-radius: 999px; background: var(--ink);
animation: sp-blink 1s var(--ease) infinite; }
.sp-dots i:nth-child(2) { animation-delay: .16s; }
.sp-dots i:nth-child(3) { animation-delay: .32s; }
/* Inside a badge the dots belong to the pill, not to the page: they take the
badge's own status colour and shrink to suit 11px type. */
.sp-badge .sp-dots { gap: 3px; }
.sp-badge .sp-dots i { width: 4px; height: 4px; background: currentColor; }
@keyframes sp-blink { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.sp-shimmer {
width: min(240px, 52vw); height: 10px; border-radius: var(--r-pill);
background: linear-gradient(100deg, var(--paper-sink) 20%, var(--paper-2) 42%, var(--paper-sink) 64%);
background-size: 220% 100%; animation: sp-shimmer 1.2s var(--ease) infinite;
}
@keyframes sp-shimmer { to { background-position-x: -220%; } }
@media (prefers-reduced-motion: reduce) {
.sp-shimmer, .sp-dots i { animation: none; }
}
.sp-board__header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sp-board__header span:last-child { margin-left: auto; color: var(--ink-soft); }
.sp-board { display: grid; gap: 12px; }
.sp-board--kanban { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sp-board--kanban section { display: flex; flex-direction: column; gap: 8px; }
.sp-board--kanban h3 { margin: 0; font-size: 12px; text-transform: uppercase; }
.sp-board article { display: flex; flex-direction: column; gap: 5px; padding: 10px; }
.sp-board article small, .sp-board article span { color: var(--ink-soft); }
.sp-board--timeline { grid-template-columns: 1fr; padding: 0; list-style: none; }
.sp-board--timeline li { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 12px; }
.sp-board--timeline time { color: var(--ink-soft); font-family: var(--font-mono); font-size: 11px; }
/* approval prompt — turn is paused, not broken */
.sp-approve { position: relative; border: var(--bw) var(--bstyle) var(--accent); border-radius: var(--r-nest);
padding: 14px; background: var(--paper-2); max-width: 68ch; }
.sp-approve__row { display: flex; gap: 8px; margin-top: 12px; }
/* --------------------------------------------------------------------------
spline node — a small control-point dot at a card's top-RIGHT corner (the
title tag owns the top-left), a nod to the hero's spline nodes. Add the
class `sp-node` to any card (or see the per-surface ::before rules in the
playground/catalog). Themes with --accent.
-------------------------------------------------------------------------- */
.sp-node { position: relative; }
.sp-node::before, .sp-approve::before {
content: ""; position: absolute;
top: calc(7px + var(--corner-inset)); right: calc(7px + var(--corner-inset));
width: 6px; height: 6px;
border-radius: var(--r-pill); background: var(--paper);
border: 1.5px solid var(--accent); pointer-events: none; z-index: 1;
}
/* --------------------------------------------------------------------------
a2ui — the native renderer for A2UI documents (a flat adjacency list of
typed components an agent describes declaratively; AGUI_INTEROP.md §3).
Layout only — the catalog dispatch and adjacency-list resolution live in
widget/a2ui.js. Cards/labels/buttons/progress reuse the existing kit
classes (sp-card, sp-label, sp-btn, sp-progress); only the a2ui-specific
spacing lives here.
-------------------------------------------------------------------------- */
.sp-a2ui { display: flex; flex-direction: column; gap: 12px; }
.sp-a2ui__text { margin: 0; }
.sp-a2ui__heading { margin: 0; font-weight: 700; }
.sp-a2ui__card-body { display: flex; flex-direction: column; gap: 10px; }
.sp-a2ui__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.sp-a2ui__row > * { flex: 1 1 140px; }
.sp-a2ui__column { display: flex; flex-direction: column; gap: 10px; }
.sp-a2ui__list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.sp-a2ui__divider { width: 100%; margin: 2px 0; border: 0; border-top: var(--line); }
.sp-a2ui__textarea { min-height: 88px; resize: vertical; }
.sp-a2ui__check { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); }
.sp-a2ui__check input { accent-color: var(--accent); }
.sp-a2ui__progress { display: flex; flex-direction: column; gap: 6px; }
.sp-a2ui__metric { display: grid; gap: 3px; min-width: 120px; }
.sp-a2ui__metric strong { font: 700 1.8rem/1 var(--font-sans); }
.sp-a2ui__metric small { color: var(--ink-soft); }
/* --------------------------------------------------------------------------
plan — a hierarchical task tree (tasks → subtasks): the agent's plan surface.
Status is a clickable dot that cycles; rows expand; a dashed spline connects
subtasks to their parent. Behaviour is in widget/plan.js; this is only look.
-------------------------------------------------------------------------- */
.sp-plan { display: flex; flex-direction: column; }
.sp-plan__task + .sp-plan__task { margin-top: 4px; padding-top: 4px;
border-top: var(--bw-hair) var(--bstyle) var(--ink-faint); }
/* status → one color token, shared by the dot and the badge */
.sp-plan [data-status="completed"] { --st: var(--ok); }
.sp-plan [data-status="in-progress"] { --st: var(--accent); }
.sp-plan [data-status="pending"] { --st: var(--ink-faint); }
.sp-plan [data-status="need-help"] { --st: var(--warn); }
.sp-plan [data-status="failed"] { --st: var(--bad); }
.sp-plan__row, .sp-plan__sub-row { display: flex; align-items: center; gap: 10px;
padding: 6px 8px; border-radius: var(--r-nest); cursor: pointer;
transition: background var(--fast) var(--ease); }
.sp-plan__row:hover, .sp-plan__sub-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.sp-plan__status { flex-shrink: 0; display: inline-flex; padding: 0; border: none; background: none;
cursor: pointer; color: var(--st, var(--ink-faint));
transition: transform var(--fast) var(--ease); }
.sp-plan__status svg { width: 18px; height: 18px; display: block; }
.sp-plan__sub-row .sp-plan__status svg { width: 15px; height: 15px; }
.sp-plan__status:hover { transform: scale(1.12); }
.sp-plan__status:active { transform: scale(.9); }
.sp-plan__status.is-bump { animation: sp-bump .35s var(--ease); }
@keyframes sp-bump { 40% { transform: scale(1.2); } }
.sp-plan__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; font-size: 14px; }
.sp-plan__sub-row .sp-plan__title { font-size: 13px; }
.sp-plan [data-status="completed"] > .sp-plan__row > .sp-plan__title,
.sp-plan [data-status="completed"] > .sp-plan__sub-row > .sp-plan__title {
color: var(--ink-soft); text-decoration: line-through; }
.sp-plan__meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sp-plan__sub-row .sp-plan__meta { margin-left: auto; }
.sp-plan__dep { font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft);
background: var(--paper-sink); border-radius: var(--r-nest); padding: 1px 6px; }
/* priority — words over glyphs: only "high" gets a quiet warn chip; other
priorities keep their datum on hover without spending ink. */
.sp-plan__prio-chip { font-family: var(--font-mono); font-size: 10px;
letter-spacing: .04em; text-transform: uppercase;
border-radius: var(--r-pill); padding: 1px 8px;
border: var(--bw) var(--bstyle) var(--warn); color: var(--warn); }
.sp-plan__prio-quiet { display: inline-flex; width: 0; height: 11px; }
.sp-plan__badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
text-transform: uppercase; border-radius: var(--r-pill); padding: 1px 8px;
border: var(--bw) var(--bstyle) var(--st, var(--line)); color: var(--st, var(--ink-soft)); }
/* collapse: grid-rows 0fr→1fr animates height with no JS measuring */
.sp-plan__collapse { display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--med) var(--ease); }
.sp-plan__collapse[data-open] { grid-template-rows: 1fr; }
.sp-plan__collapse > .sp-plan__collapse-in { overflow: hidden; min-height: 0; }
/* subtask group with the dashed connector aligned under the task dot */
.sp-plan__subs { position: relative; margin: 2px 0 4px 17px; padding-left: 18px; }
.sp-plan__subs::before { content: ""; position: absolute; top: 0; bottom: 10px; left: 0;
border-left: var(--bw) dashed var(--ink-faint); }
.sp-plan__detail { color: var(--ink-soft); font-size: 12px; margin: 0 0 4px 12px;
padding-left: 14px; border-left: var(--bw) dashed var(--ink-faint); }
.sp-plan__detail p { margin: 6px 0; }
.sp-plan__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.sp-plan__tool { font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft);
background: var(--paper-sink); border-radius: var(--r-nest); padding: 1px 6px; }
/* staggered entrance for revealed subtasks */
.sp-plan__collapse[data-open] > .sp-plan__collapse-in > .sp-plan__subs > .sp-plan__sub {
animation: sp-slidein var(--med) var(--ease) both; }
.sp-plan__sub:nth-child(2) { animation-delay: .04s; }
.sp-plan__sub:nth-child(3) { animation-delay: .08s; }
.sp-plan__sub:nth-child(4) { animation-delay: .12s; }
@keyframes sp-slidein { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
/* --------------------------------------------------------------------------
run — background agents. A workflow/run card: a header with a live pulse
and mono meta, collapsible phases (native ), a tick-strip with one
square per agent, and compact per-agent rows (tokens · tools · time).
Tick states: is-live (accent, pulsing) · is-done (ink) · is-fail (bad).
-------------------------------------------------------------------------- */
.sp-run {
border: var(--bw) var(--bstyle) var(--line); border-radius: var(--r-nest);
background-color: var(--paper-2); background-image: var(--dither-grain);
}
.sp-run__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
padding: 12px 16px; border-bottom: var(--bw-hair) var(--bstyle) var(--ink-faint); }
.sp-run__title { font-weight: 700; font-size: 15px; }
.sp-run__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sp-run__meta b { color: var(--ink); font-weight: 600; }
.sp-run__body { padding: 4px 16px 12px; }
/* live pulse — a run that is doing something right now */
.sp-live { width: 8px; height: 8px; flex: none; border-radius: var(--r-pill);
background: var(--accent); animation: sp-pulse 1.4s var(--ease) infinite; }
@keyframes sp-pulse { 50% { opacity: .3; } }
/* tick strip — the fleet at a glance: queued (outline) → live (accent,
pulsing) → done (ink) / fail (bad). One square per agent. */
.sp-ticks { display: flex; flex-wrap: wrap; gap: 3px; }
.sp-ticks i { width: 7px; height: 7px; border-radius: 1.5px;
border: var(--bw-hair) solid var(--ink-faint); background: transparent; }
.sp-ticks .is-done { background: var(--ink); border-color: var(--ink); }
.sp-ticks .is-live { background: var(--accent); border-color: var(--accent);
animation: sp-pulse 1.1s var(--ease) infinite; }
.sp-ticks .is-fail { background: var(--bad); border-color: var(--bad); }
/* phase — a collapsible group of agents */
.sp-run__phase + .sp-run__phase { border-top: var(--bw-hair) var(--bstyle) var(--ink-faint); }
.sp-run__phase > summary { list-style: none; cursor: pointer; display: flex;
align-items: center; gap: 12px; padding: 10px 0; }
.sp-run__phase > summary::-webkit-details-marker { display: none; }
.sp-run__phase > summary .sp-ico { color: var(--ink-soft); flex: none;
transition: transform var(--med) var(--ease); }
.sp-run__phase[open] > summary .sp-ico { transform: rotate(90deg); }
.sp-run__phase-name { font-weight: 600; font-size: 14px; }
.sp-run__phase > summary .sp-ticks { margin-left: auto; max-width: 45%; justify-content: flex-end; }
/* agent rows — a quiet grid: agent · tokens · tools · time. The header cells
come first (4 of them), so the first child is the left-aligned lead. */
.sp-run__agents { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
gap: 3px 18px; padding: 0 0 10px 28px;
font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-run__th { font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
color: var(--ink-faint); text-align: right; padding-bottom: 2px; }
.sp-run__th:first-child { text-align: left; }
.sp-run__agent { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-run__num { text-align: right; color: var(--ink-soft); }
/* --------------------------------------------------------------------------
trace — the live run-trace inspector (the playground's Runs surface): a
list of runs that expands into a per-run span timeline on a time axis,
spline style — 1px strokes, a filled bar for a span's duration, a small
control-point node (no fill, just the accent-stroked circle every card's
corner wears) for an instantaneous one. A `suspended` span (a workflow
parked on a HITL gate) reads as a distinct dashed warn-toned node and
carries the pending decision's prompt right under it. Durable log records
are point markers on that same axis. Behaviour is in widget/trace.js; this
is only look.
-------------------------------------------------------------------------- */
.sp-trace { display: flex; flex-direction: column; gap: 8px; }
.sp-trace__empty { padding: 2px 0; }
.sp-trace__run {
border: var(--bw) var(--bstyle) var(--line); border-radius: var(--r-nest);
background-color: var(--paper-2); background-image: var(--dither-grain);
overflow: hidden;
}
/* status → one color token, shared by the badge and the timeline bars —
same convention as .sp-plan's [data-status] tokens */
.sp-trace [data-status="success"] { --st: var(--ok); }
.sp-trace [data-status="running"] { --st: var(--accent); }
.sp-trace [data-status="suspended"] { --st: var(--warn); }
.sp-trace [data-status="failed"] { --st: var(--bad); }
.sp-trace [data-status="cancelled"] { --st: var(--ink-faint); }
.sp-trace [data-level="trace"],
.sp-trace [data-level="debug"] { --st: var(--ink-faint); }
.sp-trace [data-level="info"] { --st: var(--accent); }
.sp-trace [data-level="warn"] { --st: var(--warn); }
.sp-trace [data-level="error"] { --st: var(--bad); }
.sp-trace__row {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border: none; background: transparent; cursor: pointer;
font: inherit; color: var(--ink); text-align: left;
transition: background var(--fast) var(--ease);
}
.sp-trace__row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.sp-trace__chevron { flex-shrink: 0; color: var(--ink-soft); transition: transform var(--med) var(--ease); }
.sp-trace__row[aria-expanded="true"] .sp-trace__chevron { transform: rotate(90deg); color: var(--accent); }
.sp-trace__kind {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
color: var(--ink-soft); background: var(--paper-sink); border-radius: var(--r-nest);
padding: 2px 7px; flex-shrink: 0;
}
.sp-trace__subject { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sp-trace__spacer { flex: 1; }
.sp-trace__time {
font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
font-variant-numeric: tabular-nums; flex-shrink: 0;
}
/* collapse: grid-rows 0fr→1fr animates height with no JS measuring — same
technique as .sp-plan__collapse */
.sp-trace__collapse { display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--med) var(--ease); }
.sp-trace__collapse[data-open] { grid-template-rows: 1fr; }
.sp-trace__collapse > .sp-trace__collapse-in { overflow: hidden; min-height: 0; }
.sp-trace__body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.sp-trace__alert-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* timeline — a time axis with one row per span; nesting indents left */
.sp-trace__ruler {
display: flex; justify-content: space-between;
font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint);
letter-spacing: .04em; padding: 0 1px;
}
.sp-trace__spans { display: flex; flex-direction: column; gap: 8px; }
.sp-trace__span { border-left: var(--bw) dashed var(--ink-faint); padding-left: 10px; }
.sp-trace__span[data-depth="0"] { border-left-color: transparent; padding-left: 0; }
.sp-trace__span-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.sp-trace__span-name {
font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; min-width: 0;
}
.sp-trace__span-tag {
font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
letter-spacing: .06em; color: var(--st, var(--ink-soft)); flex-shrink: 0;
}
.sp-trace__span-dur {
margin-left: auto; font-family: var(--font-mono); font-size: 11px;
color: var(--ink-soft); font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.sp-trace__track {
position: relative; height: 14px; border-radius: var(--r-pill);
background-color: var(--paper-sink); background-image: var(--dither-sink); overflow: hidden;
}
.sp-trace__bar {
position: absolute; top: 0; bottom: 0; min-width: 3px;
background-color: var(--st, var(--ink-faint)); border-radius: var(--r-pill);
}
/* a `suspended` span is instantaneous (a gate, not a duration) — a small
control-point node instead of a filled bar, the same hollow-circle-on-
accent-stroke the kit draws at every card's corner (`.sp-node::before`),
just inline and status-toned here */
.sp-trace__bar--node {
min-width: 10px; max-width: 10px; top: 2px; bottom: 2px;
background: var(--paper); border: 1.5px solid var(--st, var(--warn));
border-radius: var(--r-pill);
}
.sp-trace__bar--event {
width: 9px; min-width: 9px; max-width: 9px; top: 2px; bottom: 2px;
transform: translateX(-50%); background: var(--paper);
border: 1.5px solid var(--st, var(--accent)); border-radius: var(--r-pill);
}
.sp-trace__log { padding-left: 10px; border-left: var(--bw) dotted var(--st, var(--accent)); }
.sp-trace__prompt {
margin-top: 2px; padding: 8px 10px; border: var(--bw) dashed var(--warn);
border-radius: var(--r-nest); background: color-mix(in srgb, var(--warn) 8%, var(--paper-2));
}
.sp-trace__prompt p { margin: 2px 0 0; font-size: 13px; color: var(--ink); }
.sp-trace__span-error { margin: 2px 0 0; font-size: 12px; color: var(--bad); }
/* --------------------------------------------------------------------------
activity — the collapsed tool line under an assistant turn: "Ran 2
commands ›". Native ; open reveals a mono log on sunk paper.
-------------------------------------------------------------------------- */
.sp-activity > summary { list-style: none; cursor: pointer; display: inline-flex;
align-items: center; gap: 8px; color: var(--ink-soft); font-size: 14px;
transition: color var(--fast) var(--ease); }
.sp-activity > summary::-webkit-details-marker { display: none; }
.sp-activity > summary:hover { color: var(--ink); }
.sp-activity > summary b { color: var(--ink); font-weight: 600; }
.sp-activity > summary .sp-ico { transition: transform var(--med) var(--ease); }
.sp-activity[open] > summary .sp-ico { transform: rotate(90deg); }
.sp-activity__log { margin: 8px 0 0; padding: 10px 12px; overflow-x: auto;
font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--ink-soft);
background-color: var(--paper-sink); background-image: var(--dither-sink);
border: var(--bw-hair) var(--bstyle) var(--ink-faint); border-radius: var(--r-nest);
white-space: pre; }
.sp-activity__log b { color: var(--ink); font-weight: 600; }
/* --------------------------------------------------------------------------
stats — the small numbers that ride along with a run: a diffstat capsule
(+adds −dels) and a stat tile (label · big mono value · delta).
-------------------------------------------------------------------------- */
.sp-diffstat { display: inline-flex; align-items: center; gap: 8px;
padding: 2px 9px; border: var(--bw-hair) var(--bstyle) var(--ink-faint);
border-radius: var(--r-pill);
font-family: var(--font-mono); font-size: 12px; font-weight: 600;
font-variant-numeric: tabular-nums; }
.sp-diffstat ins { color: var(--ok); text-decoration: none; }
.sp-diffstat del { color: var(--bad); text-decoration: none; }
.sp-stat { display: inline-flex; flex-direction: column; gap: 2px; min-width: 108px;
padding: 12px 14px; border: var(--bw) var(--bstyle) var(--line); border-radius: var(--r-nest);
background-color: var(--paper-2); background-image: var(--dither-grain); }
.sp-stat__value { font-family: var(--font-mono); font-size: 22px; font-weight: 600;
letter-spacing: -.01em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sp-stat__value small { font-size: 13px; font-weight: 400; color: var(--ink-soft); }
.sp-stat__delta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.sp-stat__delta.up { color: var(--ok); }
.sp-stat__delta.down { color: var(--bad); }
/* --------------------------------------------------------------------------
entrance motion — snappy in
-------------------------------------------------------------------------- */
@keyframes sp-pop {
from { opacity: 0; transform: translateY(8px) scale(.98); }
to { opacity: 1; transform: none; }
}
.sp-in { animation: sp-pop var(--med) var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}