/* exe.dev blog, the 2026 design (Kinetic Studio, from the site's round seven, Oct 2026).

   The page is a desk of paper: Primary's field-manual sheets lying flat on a light ground, the site's rail down the left
   as the blog's nav. The blog's head is a short Red dark sheet with its holes punched through; each month of posts is a
   tan sheet; a post is one long tan sheet over a still painting. Tick marks at a sheet's right edge sit level with a
   line of its type (site.js measures them). The pen line under a nav link says where you are; links in text get a thin
   pencil line. Light or dark follows the reader's setting. */

:root {
  --white: #FFFFFF; --tan-light: #F7F4EF; --tan-medium: #EAE5DF; --tan-dark: #6E6860; --black: #282624;
  --orange-light: #FFCE98; --orange-dark: #9E5C00; --orange: #F48E00;
  --yellow-light: #FFF7D6; --yellow-dark: #8F8043; --yellow: #D6B119;
  --green-light: #BFDFC7; --green-dark: #304438; --green: #0AAF44;
  --blue-light: #CFE5EE; --blue-dark: #3A6776; --blue: #29B1DE;
  --red-light: #EED0D0; --red-dark: #5D3636; --red: #E94646;
  --font-serif: "GT Alpina", Georgia, serif;
  --font-tw: "GT Alpina Typewriter", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mono: "Antarctican Mono", "Red Hat Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-code: "Red Hat Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ground: var(--tan-light);
  /* the sheets, as printed (the paper's grain lies over them) */
  --tan-sheet: rgb(243, 237, 231);
  --head-sheet: rgb(103, 59, 59);
  --foot-sheet: rgb(174, 102, 0);
  --sheet-on-tan: #282624;
  --pen: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%208%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1.40%203.65%20L3.14%203.66%20L4.89%203.67%20L6.63%203.68%20L8.37%203.69%20L10.11%203.70%20L11.86%203.71%20L13.60%203.72%20L15.34%203.73%20L17.09%203.74%20L18.83%203.74%20L20.57%203.75%20L22.31%203.76%20L24.06%203.76%20L25.80%203.77%20L27.54%203.77%20L29.29%203.78%20L31.03%203.78%20L32.77%203.78%20L34.51%203.78%20L36.26%203.78%20L38.00%203.78%20L39.74%203.78%20L41.49%203.78%20L43.23%203.77%20L44.97%203.77%20L46.71%203.76%20L48.46%203.75%20L50.20%203.74%20L51.94%203.73%20L53.69%203.72%20L55.43%203.71%20L57.17%203.70%20L58.91%203.69%20L60.66%203.67%20L62.40%203.65%20L64.14%203.64%20L65.89%203.62%20L67.63%203.60%20L69.37%203.58%20L71.11%203.56%20L72.86%203.53%20L74.60%203.51%20L76.34%203.48%20L78.09%203.46%20L79.83%203.44%20L81.57%203.44%20L83.31%203.44%20L85.06%203.45%20L86.80%203.46%20L88.54%203.45%20L90.29%203.42%20L92.03%203.38%20L93.77%203.33%20L95.51%203.28%20L97.26%203.24%20L99.00%203.20%20L99.15%203.24%20L99.25%203.34%20L99.29%203.49%20L99.25%203.64%20L99.15%203.74%20L99.00%203.78%20L97.26%203.84%20L95.51%203.93%20L93.77%204.04%20L92.03%204.17%20L90.29%204.29%20L88.54%204.42%20L86.80%204.53%20L85.06%204.62%20L83.31%204.70%20L81.57%204.77%20L79.83%204.84%20L78.09%204.89%20L76.34%204.92%20L74.60%204.96%20L72.86%204.99%20L71.11%205.03%20L69.37%205.06%20L67.63%205.09%20L65.89%205.12%20L64.14%205.15%20L62.40%205.18%20L60.66%205.21%20L58.91%205.23%20L57.17%205.26%20L55.43%205.28%20L53.69%205.30%20L51.94%205.32%20L50.20%205.34%20L48.46%205.36%20L46.71%205.38%20L44.97%205.40%20L43.23%205.41%20L41.49%205.43%20L39.74%205.44%20L38.00%205.46%20L36.26%205.47%20L34.51%205.48%20L32.77%205.49%20L31.03%205.50%20L29.29%205.50%20L27.54%205.51%20L25.80%205.52%20L24.06%205.52%20L22.31%205.53%20L20.57%205.53%20L18.83%205.54%20L17.09%205.54%20L15.34%205.54%20L13.60%205.54%20L11.86%205.54%20L10.11%205.55%20L8.37%205.55%20L6.63%205.55%20L4.89%205.55%20L3.14%205.55%20L1.40%205.55%20L1.04%205.48%20L0.73%205.27%20L0.52%204.96%20L0.45%204.60%20L0.52%204.24%20L0.73%203.93%20L1.04%203.72Z%22%2F%3E%3C%2Fsvg%3E");
}

/* ---------- the page ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--ground); color: var(--black); font: 300 18px/1.4 var(--font-serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--black); color: var(--tan-light); }
/* max-width: none so a post's own `main { }` style, written for the old layout, can't narrow the whole page */
.stage { position: relative; width: 100%; max-width: none; min-height: 100vh; overflow-x: clip; container: page / inline-size; background: var(--ground); --paper: .4; }
/* Primary's paper texture over the whole composition */
.paper { position: relative; isolation: isolate; }
.paper::after { content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; background: url("/static/paper.webp") 0 0 / 600px repeat; mix-blend-mode: multiply; opacity: var(--paper); }

/* ---------- buttons: square, ink-filled; the command is the command itself, with Primary's copy icon ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px; border: 0; border-radius: 0; background: none; font: 400 15.5px/1 var(--font-tw); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--face); }
.btn:focus-visible { outline: .5px solid currentColor; outline-offset: 4px; }
.btn-primary { --face: var(--black); color: var(--white); }
.btn-primary:hover, .btn-primary:focus-visible { --face: #3B3835; }
.join { display: flex; flex-wrap: wrap; gap: 0; }
.cta-cmd { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 2px; border: 0; background: none; color: inherit; font: 400 15px/1 var(--font-tw); white-space: nowrap; cursor: pointer; }
.cta-cmd .cmd { position: relative; display: inline-block; }
.cta-cmd .copied, .cta-cmd.is-copied .label, .cta-cmd .i-done, .cta-cmd.is-copied .i-copy { display: none; }
.cta-cmd.is-copied .copied, .cta-cmd.is-copied .i-done { display: inline; }
.cta-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; opacity: .75; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cfilter%20id%3D%22g%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.55%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20-2.4%202.05%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20filter%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E") 0 0 / 48px 48px repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cfilter%20id%3D%22g%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.55%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20-2.4%202.05%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20filter%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E") 0 0 / 48px 48px repeat; }
.cta-cmd:hover .cta-icon { opacity: 1; }
.cta-cmd:focus-visible { outline: .5px solid currentColor; outline-offset: 2px; }
/* no line at rest; on hover the nav's pen line draws under the command */
.cta-cmd .cmd::after { content: ""; position: absolute; left: var(--pen-left, -3px); width: var(--pen-width, calc(100% + 8px)); bottom: -9px; height: 9px; pointer-events: none; background: currentColor; -webkit-mask: var(--pen) 0 0 / 100% 100% no-repeat; mask: var(--pen) 0 0 / 100% 100% no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path .16s cubic-bezier(.35, .6, .25, 1); }
.cta-cmd:is(:hover, :focus-visible) .cmd::after { clip-path: inset(0 0 0 0); }
.actions:has(.cta-cmd) { align-items: center; gap: 26px; }

/* ---------- the rail: the site's nav, down the left ---------- */
.g-grid { --rail: clamp(240px, 20cqi, 312px); display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); align-items: start; }
.rail { position: sticky; top: 0; z-index: 20; height: 100vh; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); padding: 28px 48px 26px 32px; background: var(--ground); color: var(--black); }
.rail-top { align-self: start; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rail-logo { display: inline-flex; padding: 4px 0; }
.rail-logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rail-logo > svg { width: 104px; height: 34px; }
.rail-logo .lb { fill: var(--logo-body, #282624); }
.rail-logo .lw { fill: var(--logo-word, #282624); }
.rail-logo .lp { fill: #282624; }
.rail-logo .le { fill: var(--logo-eye, transparent); }
.rail-logo .lm { fill: var(--logo-mouth, transparent); }
.rail-nav { display: grid; justify-items: start; gap: 12px; }
.rail-nav a, .rail-login { position: relative; color: inherit; text-decoration: none; font: 400 18px/1.25 var(--font-serif); }
.rail-nav .rail-login { margin-top: 12px; }
.rail-nav a:focus-visible, .rail-login:focus-visible { outline: none; }
.rail-foot { align-self: end; width: min(100%, 196px); display: grid; }
.rail-foot .cta-cmd { justify-self: start; height: 40px; margin-bottom: 10px; font-size: 14.5px; }
.rail-foot .btn { width: 100%; height: 40px; padding: 0 14px; justify-content: flex-start; font-size: 14.5px; }
.g-main { position: relative; min-width: 0; container: main / inline-size; }

/* the pen line: drawn by hand for each nav link at its own length (site.js); it shows on hover and stays under the page
   you're on. Links in text get the pencil: a thin, grainy line that's always there and darkens on hover. */
.rail-nav a::after, .rail-login::after, .end-links a::after, .end-follow a::after, .end-legal a::after, .pen-link::after, .pen-hover::after {
  content: ""; position: absolute; left: var(--pen-left, -3px); width: var(--pen-width, calc(100% + 8px)); bottom: -7px; height: 9px;
  pointer-events: none; background: currentColor;
  -webkit-mask: var(--pen) 0 0 / 100% 100% no-repeat; mask: var(--pen) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path .16s cubic-bezier(.35, .6, .25, 1);
}
.rail-nav a:is(:hover, :focus-visible, [aria-current="page"])::after, .rail-login:is(:hover, :focus-visible)::after,
.end-links a:is(:hover, :focus-visible, [aria-current="page"])::after, .end-follow a:is(:hover, :focus-visible)::after, .end-legal a:is(:hover, :focus-visible)::after { clip-path: inset(0 0 0 0); }
.pen-link { position: relative; text-decoration: none; }
.pen-link::after { bottom: var(--pencil-drop, -6px); clip-path: inset(0 0 0 0); opacity: .5; transition: opacity .12s ease; }
.pen-link:is(:hover, :focus-visible)::after { opacity: .95; }
/* a post's title in a list: the pen line shows at once when you point at the post, not drawn */
.pen-hover { position: relative; }
.pen-hover::after { bottom: -8px; clip-path: none; transition: none; visibility: hidden; }

/* phones: a bar with the logo, More and the one button; the menu holds the rest */
.g-bar, .g-sheet { display: none; }
@container page (max-width: 900px) {
  .g-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .g-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 16px; background: var(--ground); border-bottom: .5px solid var(--black); }
  .g-bar .rail-logo > svg { width: 96px; height: 31px; }
  .g-bar-end { display: flex; align-items: center; gap: 20px; }
  .g-bar #g-menu { display: grid; place-items: center; width: auto; height: 40px; padding: 0 2px; border: 0; background: none; color: var(--black); font: 400 15px/1 var(--font-tw); cursor: pointer; text-decoration: none; }
  .g-bar .g-cta { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .g-sheet.open { display: grid; gap: 34px; align-content: start; position: fixed; inset: 60px 0 0; z-index: 39; overflow-y: auto; padding: 30px 24px 44px; background: var(--ground); }
  .g-sheet .rail-nav a { font: 300 34px/1.15 var(--font-serif); letter-spacing: -.015em; padding: 5px 0; }
  .g-sheet .rail-nav a::after { bottom: -2px; }
  .g-sheet .rail-login { margin-top: 16px; font: 300 24px/1.2 var(--font-serif); }
  .g-sheet .rail-foot { width: auto; }
  .end-links a, .end-legal a { padding: 9px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-nav a::after, .rail-login::after, .end-links a::after, .end-follow a::after, .end-legal a::after, .cta-cmd .cmd::after { transition: none; }
}

/* ---------- sheets of paper ---------- */
.bed { position: relative; isolation: isolate; }
.bed > .sheet { position: relative; z-index: 2; }
.sheet { position: relative; color: var(--sheet-ink, var(--tan-light)); }
.hair { position: absolute; display: block; }
.hair.v { top: 36px; bottom: 34px; width: 0; border-left: .5px solid currentColor; }
.sheet .r1 { left: 40px; }
/* tick marks: short horizontal ticks at the sheet's right edge, each level with a line of its type */
.sheet .tk { position: absolute; z-index: 2; pointer-events: none; color: var(--sheet-ink, currentColor); }
.sheet .tk-y { right: 7.4px; width: 16.6px; height: 0; border-top: .5px solid currentColor; }
.tk-probe { display: inline-block; width: 0; vertical-align: baseline; }
.tk-probe-cap { height: 1cap; }
.tk-probe-base { height: 0; }

/* ---------- the blog ---------- */
.b-wrap { --reveal-x: clamp(96px, 12cqi, 210px); position: relative; }
.b-row { display: grid; grid-template-columns: var(--reveal-x) minmax(0, 1fr) clamp(24px, 4cqi, 64px); }
.b-row > .bed { grid-column: 2; position: relative; display: flex; }
.b-row.to-edge > .bed { grid-column: 2 / -1; }
.b-row + .b-row { margin-top: clamp(28px, 4svh, 48px); }
.b-sheet { --sheet-ink: var(--sheet-on-tan); flex: 1; min-width: 0; color: var(--sheet-ink); background: var(--tan-sheet); }
.b-in { position: relative; z-index: 2; padding: 34px clamp(26px, 5cqi, 72px) 40px clamp(26px, 4cqi, 46px); }
.b-label { margin: 0; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.unpublished-note { margin-left: 6px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.b-preview { position: relative; z-index: 5; padding: 10px 16px; background: var(--yellow-light); color: var(--black); font: 400 14px/1.3 var(--font-tw); text-align: center; }

/* the index's head: a short Red dark sheet, its holes punched through */
.b-head { --sheet-ink: var(--tan-light); flex: 1; display: grid; grid-template-columns: 62% minmax(0, 1fr); min-height: clamp(260px, 36svh, 380px); background: var(--head-sheet); color: var(--sheet-ink); }
.b-head .r2 { left: 62%; }
.b-head h1 { margin: 0; padding: 30px 40px 30px 74px; font: 300 clamp(56px, 9cqi, 132px)/.98 var(--font-serif); letter-spacing: -.025em; }
.b-head-side { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: 30px 46px 34px 34px; font: 400 15px/1.45 var(--font-tw); }
.b-head-side p { margin: 0; }
/* the posts the team picked (tagged "top" in the editor), beside the title */
.b-top { display: grid; gap: 16px; margin-top: calc(clamp(56px, 9cqi, 132px) * .13 - 1.5px); }   /* its label on the title's cap line */
.b-top ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.b-top a { display: inline-block; color: inherit; text-decoration: none; font: 300 18px/1.25 var(--font-serif); letter-spacing: -.005em; text-wrap: balance; }
.b-top a:is(:hover, :focus-visible)::after { visibility: visible; }
.b-feeds { display: flex; gap: 22px; }
.b-feeds a, .b-end a { color: inherit; }

/* a sheet for each month, its name large; each post's author and date on the right */
.b-month-title { margin: 0 0 18px; font: 300 clamp(40px, 5cqi, 64px)/1 var(--font-serif); letter-spacing: -.02em; }
.b-entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 22%); gap: 6px 32px; align-items: baseline; padding: 16px 0 17px; border-top: .5px solid color-mix(in srgb, var(--sheet-ink) 24%, transparent); color: inherit; text-decoration: none; }
.b-entry .b-main { display: grid; gap: 7px; }
.b-entry .b-side { display: grid; justify-items: end; gap: 4px; font: 400 13.5px/1.4 var(--font-tw); text-align: right; }
.b-entry .b-date { opacity: .7; }
.b-entry .b-title { position: relative; justify-self: start; font: 300 23px/1.2 var(--font-serif); letter-spacing: -.01em; text-wrap: balance; }
.b-entry .b-desc { font: 300 16px/1.45 var(--font-serif); opacity: .78; text-wrap: pretty; }
.b-entry:is(:hover, :focus-visible) .pen-hover::after { visibility: visible; }
.b-entry:focus-visible { outline: .5px solid currentColor; outline-offset: 4px; }

/* a post opens on a painting, still behind the page while the post's paper scrolls up over it; its edges thin out into
   the paper like a watercolor wash (painting.js, on the graphics card) */
.b-paint { position: sticky; top: 0; z-index: 0; height: 84vh; height: 84svh; margin-bottom: -84vh; margin-bottom: -84svh; pointer-events: none; }
.b-paint .paint-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.b-paint.is-gl picture { visibility: hidden; }
.b-paint picture, .b-paint img { display: block; width: 100%; height: 100%; }
.b-paint img { object-fit: cover; object-position: var(--focus, 50% 40%); }
.b-wrap > :not(.b-paint) { position: relative; z-index: 1; transform: translateZ(0); }   /* a layer of its own, or Safari can draw the painting over it after a scroll or an app switch */
.b-post-row { margin-top: 30vh; margin-top: 30svh; }
.b-article .b-in { z-index: auto; padding-top: 40px; padding-bottom: 48px; }   /* no layer of its own, so a post's charts can blend into the sheet */
.b-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 13.5px/1.4 var(--font-tw); }
.b-xl { margin: 26px 0 0; max-width: 17ch; font: 300 clamp(40px, 6cqi, 80px)/1.02 var(--font-serif); letter-spacing: -.025em; text-wrap: balance; }
.b-dek { margin: 22px 0 0; max-width: 46ch; font: 400 17px/1.5 var(--font-tw); text-wrap: pretty; }
.b-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; max-width: 66ch; margin-top: 56px; font: 400 15px/1.3 var(--font-tw); }

/* ---------- a post's words: Primary's book type, GT Alpina Light at 19px ---------- */
.b-body { position: relative; max-width: 66ch; margin-top: 48px; padding-top: 40px; font: 300 19px/1.62 var(--font-serif); overflow-wrap: break-word; }
.b-body::before { content: ""; position: absolute; left: 0; top: 0; width: 120px; border-top: .5px solid currentColor; }
.b-body > :first-child { margin-top: 0; }
.b-body p { margin: 0 0 1.05em; text-wrap: pretty; }
.b-body :is(h1, h2) { margin: 1.9em 0 .55em; font: 300 36px/1.1 var(--font-serif); letter-spacing: -.015em; text-wrap: balance; }
.b-body h1 { font-size: 40px; }
.b-body h3 { margin: 2.2em 0 .8em; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.b-body h4 { margin: 1.8em 0 .5em; font: 400 19px/1.35 var(--font-serif); }
/* the licensed set has GT Alpina in Light and Regular only: bold is Regular */
.b-body :is(strong, b) { font-weight: 400; }
.b-body a { color: inherit; text-decoration: underline; text-decoration-thickness: .5px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: .24em; }
.b-body a:hover { text-decoration-color: currentColor; }
.b-body a.pen-link { text-decoration: none; --pencil-drop: -3px; }
.b-body hr { width: 120px; margin: 2.4em 0; border: 0; border-top: .5px solid currentColor; }
/* lists: Primary's starfish down a column of 0.5px rules; numbers in the typewriter */
.b-body :is(ul, ol) { margin: 0 0 1.2em; padding: 0; list-style: none; }
.b-body > ul > li { position: relative; padding: 10px 0 10px 26px; border-top: .5px solid color-mix(in srgb, var(--sheet-ink) 26%, transparent); }
.b-body > ul > li:last-child { border-bottom: .5px solid color-mix(in srgb, var(--sheet-ink) 26%, transparent); }
.b-body > ul > li::before { content: ""; position: absolute; left: 0; top: calc(10px + .5em); width: 11px; height: 11px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12.73 12.73%22%3E%3Cpath d=%22M6.36304 0L7.46788 3.42516L10.5159 1.51152L9.1606 4.84552L12.7256 5.33881L9.54431 7.02164L11.9582 9.69104L8.43946 8.93528L8.57272 12.5318L6.36304 9.69104L4.15335 12.5318L4.28661 8.93528L0.767912 9.69104L3.18177 7.02164L0.000496387 5.33881L3.56547 4.84552L2.21018 1.51152L5.25819 3.42516L6.36304 0Z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12.73 12.73%22%3E%3Cpath d=%22M6.36304 0L7.46788 3.42516L10.5159 1.51152L9.1606 4.84552L12.7256 5.33881L9.54431 7.02164L11.9582 9.69104L8.43946 8.93528L8.57272 12.5318L6.36304 9.69104L4.15335 12.5318L4.28661 8.93528L0.767912 9.69104L3.18177 7.02164L0.000496387 5.33881L3.56547 4.84552L2.21018 1.51152L5.25819 3.42516L6.36304 0Z%22/%3E%3C/svg%3E") center / contain no-repeat; }
.b-body ol { counter-reset: n; }
.b-body > ol > li { position: relative; padding: 10px 0 10px 34px; border-top: .5px solid color-mix(in srgb, var(--sheet-ink) 26%, transparent); counter-increment: n; }
.b-body > ol > li:last-child { border-bottom: .5px solid color-mix(in srgb, var(--sheet-ink) 26%, transparent); }
.b-body > ol > li::before { content: counter(n); position: absolute; left: 0; top: 12px; font: 400 14px/1.6 var(--font-tw); opacity: .75; }
.b-body li > :is(ul, ol) { margin: 8px 0 0; }
.b-body li li { position: relative; padding: 3px 0 3px 18px; }
.b-body li li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 8px; border-top: .5px solid currentColor; }
.b-body li > p { margin: 0 0 .5em; }
.b-body li > p:last-child { margin-bottom: 0; }
.b-body blockquote { margin: 1.6em 0; padding: 2px 0 2px 24px; border-left: .5px solid currentColor; font: 300 19px/1.62 var(--font-serif); opacity: .9; }
.b-body blockquote p:last-child { margin-bottom: 0; }

/* code: Red Hat Mono; blocks (and a post's own bare <pre>) are Primary's dark code card, square */
.b-body code { padding: .1em .32em .06em; background: color-mix(in srgb, var(--sheet-ink) 7%, transparent); font: 400 .8em/1 var(--font-code); overflow-wrap: break-word; }
.b-body :is(pre.code, pre:not([class])) { margin: 1.4em 0 1.6em; padding: 18px 20px; overflow-x: auto; background: #111010; color: #F7F4EF; border: .5px solid rgba(247, 244, 239, .32); font: 400 13.5px/1.7 var(--font-code); scrollbar-width: thin; }
.b-body :is(pre.code, pre:not([class])) code { padding: 0; background: none; font: inherit; white-space: pre; }
.b-body pre :is(b, strong) { font-weight: 600; }
.b-body pre.indented { margin: 1.2em 0; padding: 0; white-space: pre-wrap; word-break: break-word; font: 400 16px/1.7 var(--font-tw); }
.b-body pre.indented code { padding: 0; background: none; font: inherit; }
.b-body kbd { padding: 2px 6px 1px; border: .5px solid currentColor; font: 400 .72em/1 var(--font-code); white-space: nowrap; }

/* pictures, figures, video: whole, square, on the paper, captions in the typewriter */
.b-body img { max-width: 100%; height: auto; }
.b-body p > img, .b-body > img { display: block; margin-left: auto; margin-right: auto; }
.b-body .img-row { display: flex; gap: 14px; align-items: flex-start; justify-content: center; margin: 28px 0; }
.b-body .img-row img { flex: 1 1 0; min-width: 0; width: 100%; height: auto; }
.b-body > figure { width: fit-content; max-width: 100%; margin: 32px auto; }
.b-body > figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: .5px solid color-mix(in srgb, var(--sheet-ink) 30%, transparent); }
.b-body figcaption { margin-top: 10px; font: italic 400 12.5px/1.45 var(--font-tw); opacity: .82; text-align: left; }
.b-body figcaption:empty { display: none; }
.b-body .video-figure { margin: 32px auto; }
.b-body .video-figure figure { margin: 0; }
.b-body .video-figure video, .b-body video { display: block; width: 100%; height: auto; border: .5px solid color-mix(in srgb, var(--sheet-ink) 30%, transparent); }
.b-body aside.callout { margin: 28px 0; padding: 18px 22px; background: color-mix(in srgb, var(--sheet-ink) 6%, transparent); font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.b-body aside.callout::before, .b-body aside.callout::after { content: none; }
.b-body aside.callout > :first-child { margin-top: 0; }
.b-body aside.callout > :last-child { margin-bottom: 0; }
.b-body aside.callout figure { margin: 18px auto 0; }
.b-body aside.callout figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.b-body .asciinema-embed { margin: 28px 0 8px; max-width: 100%; overflow: hidden; container-type: inline-size; }
/* a terminal recording is a code card that plays: the same dark card and Red Hat Mono, its colours from the site's own.
   The player writes a recording's own colours and its size inline, so these have to be important to win. It sizes its
   type from a font it measures on a hidden copy outside the post, which never sees ours; so the type is sized to the
   card instead, from Red Hat Mono's even 0.6em character: the columns and the two 1.5em borders fill the width exactly */
.b-body .asciinema-embed div.ap-wrapper { justify-content: flex-start; }
.b-body .asciinema-embed div.ap-player { display: block; height: auto !important; border-radius: 0; box-shadow: inset 0 0 0 .5px rgba(247, 244, 239, .32); }
.b-body .asciinema-embed .ap-player {
  --term-color-foreground: #F7F4EF !important; --term-color-background: #111010 !important;
  --term-color-0: #111010 !important; --term-color-1: var(--red) !important; --term-color-2: var(--green) !important; --term-color-3: var(--yellow) !important;
  --term-color-4: var(--blue) !important; --term-color-5: var(--orange) !important; --term-color-6: var(--blue-light) !important; --term-color-7: var(--tan-medium) !important;
  --term-color-8: var(--tan-dark) !important; --term-color-9: var(--red-light) !important; --term-color-10: var(--green-light) !important; --term-color-11: var(--yellow-light) !important;
  --term-color-12: var(--blue-light) !important; --term-color-13: var(--orange-light) !important; --term-color-14: var(--blue-light) !important; --term-color-15: var(--white) !important;
}
.b-body .asciinema-embed pre.ap-terminal { font-family: var(--font-code); font-weight: 400; font-size: calc(100cqw / (var(--term-cols) * .6 + 3)) !important; border-width: 1.35em 1.5em; }
.b-body p.asciinema-caption { margin: 0 0 28px; font: italic 400 12.5px/1.45 var(--font-tw); opacity: .82; }
/* a post's own screenshot carousel, in the figures' terms: square images with the hairline, square thumbnails, square
   outlined arrows, and no soft shadows (which spilled into view from the next slide) */
.b-body .carousel-slide img { border-radius: 0; box-shadow: none; border: .5px solid color-mix(in srgb, var(--sheet-ink) 30%, transparent); }
.b-body .carousel-slide figcaption { color: inherit; }
.b-body .carousel-arrow { border: .5px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: 300 24px/1 var(--font-serif); }
.b-body .carousel-arrow:hover { background: color-mix(in srgb, var(--sheet-ink) 8%, transparent); }
.b-body .carousel-thumbs button { border: .5px solid transparent; border-radius: 0; }
.b-body .carousel-thumbs button[aria-current="true"] { border-color: currentColor; }
.b-body .carousel-thumbs img { border-radius: 0; }
/* an embed that has no dark scheme of its own gets an opaque white backdrop on a dark page; asking for light keeps it
   clear, so a Bluesky post shows only its card (site.js switches that card to dark with the page) */
.b-body iframe { color-scheme: light; }
.b-body .zoomable { cursor: zoom-in; }
.b-body .zoomable:focus-visible { outline: .5px solid currentColor; outline-offset: 4px; }

/* tables: 0.5px rules, the header in Antarctican caps */
.b-body table { width: 100%; margin: 28px 0; border-collapse: collapse; font: 300 16px/1.5 var(--font-serif); }
.b-body .b-scroll { overflow-x: auto; scrollbar-width: thin; }
.b-body table :is(th, td) { padding: 10px 14px 10px 0; text-align: left; vertical-align: top; border-bottom: .5px solid color-mix(in srgb, var(--sheet-ink) 26%, transparent); }
.b-body table :is(th, td):last-child { padding-right: 0; }
.b-body table :is(th, td) > p { margin: 0; }
.b-body table :is(th, td) > p + p { margin-top: 8px; }
.b-body table thead th, .b-body table:not(:has(thead)) tr:first-child > th { border-bottom-color: currentColor; font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.b-body table tbody th { font-weight: 400; }
.b-body table.sharing-matrix tbody th[scope="row"] { width: 28%; }
.b-body table .hint { display: inline-block; margin-top: 2px; font: 400 13px/1.4 var(--font-tw); opacity: .7; }

/* charts (the Vega charts) are printed on the sheet: their white ground multiplies away into the paper, and in dark
   mode they're inverted onto it (the blend is on the box, since a scroll box keeps its content from blending past it). One drawn wider than the column breaks out as far as the sheet's own right edge
   when there's room, and scrolls past that */
.b-body .vega-embed { display: block; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.b-body .vega-embed { mix-blend-mode: multiply; }
html[data-theme="dark"] .b-body .vega-embed { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.b-body input[type="range"] { margin-inline: 0; }
@container main (min-width: 980px) {
  .b-body .vega-embed { max-width: max(100%, calc(100cqi - var(--reveal-x) - clamp(24px, 4cqi, 64px) - clamp(26px, 4cqi, 46px))); }
}

.img-zoom-close { position: absolute; top: 12px; right: 14px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: .5px solid currentColor; border-radius: 0; background: var(--ground); color: var(--black); font: 300 26px/1 var(--font-serif); cursor: pointer; }
html.img-zoom-open, html.img-zoom-open body { overflow: hidden; }
.img-zoom-overlay { position: fixed; inset: 0; z-index: 1000; background: color-mix(in srgb, var(--black) 94%, transparent); }
.img-zoom-overlay[hidden] { display: none; }
.img-zoom-scroll { width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; display: flex; align-items: center; justify-content: center; padding: 64px 12px 16px; }
.img-zoom-overlay img { display: block; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; background: #fff; cursor: zoom-in; }
.img-zoom-overlay.is-full img { max-width: none; max-height: none; cursor: zoom-out; }

/* transcripts: a picture of a dark chat UI, dark in both themes, in the product's own colours */
.b-body .transcript { margin: 30px 0; padding: 18px 20px 14px; background: #111010; color: #F7F4EF; border: .5px solid rgba(247, 244, 239, .32); font: 400 15px/1.55 var(--font-tw); }
.b-body .transcript > :first-child { margin-top: 0; }
.b-body .transcript p { margin: 0 0 12px; }
.b-body .transcript > :last-child { margin-bottom: 0; }
.b-body .transcript code { background: rgba(247, 244, 239, .08); }
.b-body .tr-refusal { padding: 16px 18px; border: .5px solid #E94646; background: rgba(233, 70, 70, .1); color: #EED0D0; }
.b-body .tr-tool { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; background: #1E1D1C; font: 400 13.5px/1.5 var(--font-code); white-space: nowrap; overflow: hidden; }
.b-body .tr-tool code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0; background: none; font-size: inherit; color: #CFE5EE; }
.b-body .tr-tool .tr-icon { flex: none; font-style: normal; }
.b-body .tr-tool .tr-cmd { color: var(--orange); }
.b-body .tr-tool .tr-op { color: #FFCE98; }
.b-body .tr-tool .tr-dir { flex: none; color: #A39C92; }
.b-body .tr-tool .tr-ok { flex: none; color: #BFDFC7; }
.b-body .tr-think { position: relative; margin-top: 14px; padding-left: 34px; color: #A39C92; font-style: italic; }
.b-body .tr-think::before { content: "\1F4AD"; position: absolute; left: 0; top: 0; font-style: normal; }
.b-body .tr-think code { padding: 0; background: none; color: inherit; font-size: .92em; }
.b-body .transcript-src { margin: 12px 0 0; font: 400 13px/1.4 var(--font-tw); color: rgba(247, 244, 239, .55); }
.b-body .transcript-src a { color: rgba(247, 244, 239, .75); cursor: zoom-in; }
.b-body .transcript-src a:hover { color: #F7F4EF; }

/* ---------- the footer: an Orange dark sheet with everything a footer holds ---------- */
.h-end { position: relative; padding-top: 14svh; }
.end-bed { position: relative; margin-left: var(--reveal-x); }
.end-sheet { --sheet-ink: var(--tan-light); --split: 62%; min-height: clamp(460px, 62svh, 640px); display: grid; grid-template-columns: var(--split) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; background: var(--foot-sheet); color: var(--sheet-ink); }
.end-sheet .r2 { left: var(--split); }
.end-main { display: flex; flex-direction: column; padding: 30px 40px 0 74px; }
.end-title { margin: 30px 0 0; max-width: 11em; font: 300 clamp(44px, 6.2cqi, 96px)/.98 var(--font-serif); letter-spacing: -.025em; text-wrap: balance; }
.end-main .actions { margin-top: 40px; }
.end-sheet .actions .btn { height: 42px; padding: 0 16px; font-size: 14.5px; }
.end-side { display: grid; align-content: start; gap: 24px; padding: 36px 46px 0 34px; }
.end-logo { display: block; width: 112px; height: auto; }
.end-about { margin: 0; max-width: 30ch; font: 300 16.5px/1.4 var(--font-serif); text-wrap: pretty; }
.end-links { display: grid; grid-template-columns: repeat(2, max-content); gap: 13px 44px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.end-follow { display: grid; gap: 13px; margin: 0; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.end-follow-label { opacity: .62; }   /* a label, so it doesn't read as one of the links */
.end-follow-links { display: flex; flex-wrap: wrap; gap: 13px 26px; }
.end-links a, .end-follow a, .end-legal a { position: relative; text-decoration: none; }
.end-legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; padding: 26px 46px 56px 74px; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.end-legal span:last-child { display: flex; gap: 40px; }
@container main (max-width: 980px) {
  .end-sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; }
  .end-sheet .r2 { display: none; }
  .end-main { padding: 28px 26px 0 62px; }
  .end-side { padding: 44px 26px 0 62px; }
  .end-legal { flex-direction: column; padding: 32px 26px 52px 62px; }
  .end-legal span:last-child { gap: 24px; }
}

/* ---------- narrower: every sheet keeps the head's left edge; on a phone, 16px in ---------- */
@container page (max-width: 900px) {
  .b-wrap { --reveal-x: 16px; }
  .b-paint { top: 60px; height: 70svh; margin-bottom: -70svh; }
  .b-post-row { margin-top: 24svh; }
}
@container main (max-width: 900px) {
  .b-row { grid-template-columns: var(--reveal-x) minmax(0, 1fr) 16px; }
  .b-in { padding: 28px 24px 32px; }
  .b-head { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .b-head .r2 { display: none; }
  .b-head h1 { padding: 28px 24px 8px 58px; font-size: clamp(52px, 16cqi, 96px); }
  .b-head-side { padding: 12px 24px 28px 58px; }
  .b-top { margin-top: 0; }
  .b-entry { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .b-entry .b-side { display: flex; justify-items: start; gap: 12px; text-align: left; }
  .b-body { font-size: 18px; }
  .b-body :is(h1, h2) { font-size: 30px; }
  .b-body .img-row { flex-direction: column; align-items: center; }
  .b-body table { font-size: 15px; }
  .b-body .transcript { padding: 14px 14px 12px; font-size: 14px; }
  .b-body .tr-tool { gap: 8px; font-size: 12px; }
  .b-body .tr-tool .tr-dir { display: none; }
}

/* ---------- dark, from the reader's setting: the ground goes Brand Black, the tan sheets a step deeper to Primary's
   Tan dark with light type; the head and the footer keep their colours; the painting dims toward the page ---------- */
html[data-theme="dark"] { color-scheme: dark; --ground: #282624; --tan-sheet: rgb(121, 114, 106); --sheet-on-tan: #F7F4EF; --logo-body: #F48E00; --logo-word: #FFFFFF; --logo-eye: #FFFFFF; --logo-mouth: #282624; }
html[data-theme="dark"] ::selection { background: var(--tan-light); color: var(--black); }
html[data-theme="dark"] :is(.rail, .g-bar, .g-sheet.open) { color: var(--tan-light); }
html[data-theme="dark"] .g-bar { border-bottom-color: color-mix(in srgb, var(--tan-light) 60%, transparent); }
html[data-theme="dark"] .g-bar #g-menu { color: var(--tan-light); }
html[data-theme="dark"] :is(.rail, .g-bar, .g-sheet, .b-sheet) .btn-primary { --face: var(--tan-light); color: var(--black); }
html[data-theme="dark"] :is(.rail, .g-bar, .g-sheet, .b-sheet) .btn-primary:is(:hover, :focus-visible) { --face: #DCD5CC; }
html[data-theme="dark"] .paper::after { mix-blend-mode: soft-light; opacity: calc(var(--paper) * 1.4); }
html[data-theme="dark"] .img-zoom-close { color: var(--tan-light); }