/* exe.dev, the 2026 design (Kinetic Studio, from the site's round seven, Oct 2026): the parts every page shares.

   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 nav (a bar and a More sheet on phones). Sheets are any of Primary's colours, with their holes punched through
   where a page wants them; 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. A page adds its own sheets in its own stylesheet (about.css and so on). */

/* Primary's type, licensed for exe: GT Alpina, GT Alpina Typewriter, Antarctican Mono; Red Hat Mono (OFL) for code */
@font-face { font-family: "GT Alpina"; src: url("/static-asset/P2VNYHyglYPwxBy_YMyCpQ/gt-alpina-standard-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: block; }
@font-face { font-family: "GT Alpina"; src: url("/static-asset/I-z8LiBl3RxzaAzfqo7vww/gt-alpina-standard-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "GT Alpina Typewriter"; src: url("/static-asset/XYLfWUQCUNSqhy4WNabQWw/gt-alpina-typewriter-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: block; }
@font-face { font-family: "GT Alpina Typewriter"; src: url("/static-asset/BcBn1khrMxTxPzeOq1kI6g/gt-alpina-typewriter-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "GT Alpina Typewriter"; src: url("/static-asset/SM22j1VhGsKhifplPFcYXQ/gt-alpina-typewriter-regular-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "GT Alpina Typewriter"; src: url("/static-asset/O7fyIQZI_-sF_CS-9SdQmA/gt-alpina-typewriter-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "Antarctican Mono"; src: url("/static-asset/2atdSJE55MANPk6tjVaBUA/antarctican-mono-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "Red Hat Mono"; src: url("/static-asset/OCrkYaxSgjXAbcmeCuJ5dg/red-hat-mono-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Red Hat Mono"; src: url("/static-asset/rFznspMEYHypJK9yTWIwOQ/red-hat-mono-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

: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);
  --green-sheet: rgb(51, 72, 59);
  --medium-sheet: rgb(234, 229, 223);
  --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); }
/* there for a screen reader, not on the page */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* max-width: none, so no page style can 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-asset/dBFXMAU1mySVxtWOWWYRIg/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 link in text that runs onto another line: the pencil under each line of it (site.js), not one line under the lot */
.pen-link.is-wrapped { padding-bottom: calc(-1 * var(--pencil-drop, -6px)); background: var(--pen-wrap) 0 100% / 100% 9px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pen-link.is-wrapped:is(:hover, :focus-visible) { background-image: var(--pen-wrap-on); }
.pen-link.is-wrapped::after { content: none; }
/* a title in a list: the pen line shows at once when you point at it, 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; }


/* ---------- a page: its sheets in rows, all on one left edge while the rail shows ---------- */
.wrap { --reveal-x: clamp(96px, 12cqi, 210px); position: relative; }
.row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--reveal-x) minmax(0, 1fr) clamp(24px, 4cqi, 64px); }
.row > .bed { grid-column: 2; position: relative; display: flex; }
.row.to-edge > .bed { grid-column: 2 / -1; }
.in { position: relative; padding: 34px clamp(26px, 5cqi, 72px) 40px clamp(26px, 4cqi, 46px); }

/* ---------- 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; }
/* Primary's on-dark logo, inlined so its eyes can move: an orange fish with white eyes, a white wordmark */
.end-logo { width: 112px; }
.end-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.end-logo :is(.lb, .lid) { fill: #F48E00; }
.end-logo :is(.le, .lw) { fill: #FFFFFF; }
.end-logo :is(.lp, .lm) { fill: #282624; }
.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) {
  .wrap { --reveal-x: 16px; }
}
@container main (max-width: 900px) {
  .row { grid-template-columns: var(--reveal-x) minmax(0, 1fr) 16px; }
  .in { padding: 28px 24px 32px; }
}

/* ---------- 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, .tan-sheet) .btn-primary { --face: var(--tan-light); color: var(--black); }
html[data-theme="dark"] :is(.rail, .g-bar, .g-sheet, .tan-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); }