/* pixa: the font, the palette, the pixel frame, the pixel tooltip and the styles of the diagrams of pixa.js. It works
   on its own, with GeistPixel-Square.woff2 next to it. A project loads its own CSS after it. */
@font-face {
  font-family: "Geist Pixel";
  src: url("https://royfish.dev/public/pixa/GeistPixel-Square.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark; /* dark scrollbars and form controls too */
  --bg: #0a0a0a;
  --fg: #ededed;
  --muted: #8a8a8a;
  --rule: #262626;
  --code-bg: #171717;
  --pixel-shadow: #2a2a2a;
  --orange: #ff8c42;
  --orange-shadow: #5c2d0e;
  --orange-fill: #221309;
  /* The palette: the color names of diagram(). Each tone has 4.5:1 contrast or more on --bg. */
  --c-red: #ff6b6b;
  --c-orange: #ff8c42;
  --c-yellow: #e0af68;
  --c-green: #9ece6a;
  --c-teal: #73daca;
  --c-blue: #7aa2f7;
  --c-purple: #bb9af7;
  --c-pink: #ff7ab2;
}

/* A two-step blink: the lights of the sprites (o and O), and any cursor or light of a project. */
@keyframes blink { 50% { opacity: 0; } }

/* Text in a palette color: <span class="c-orange">…</span>. The color key of a diagram uses these classes too. */
.c-red { color: var(--c-red); }
.c-orange { color: var(--c-orange); }
.c-yellow { color: var(--c-yellow); }
.c-green { color: var(--c-green); }
.c-teal { color: var(--c-teal); }
.c-blue { color: var(--c-blue); }
.c-purple { color: var(--c-purple); }
.c-pink { color: var(--c-pink); }
.c-grey { color: var(--muted); }

/* A pixel frame: <div class="frame">…</div>. */
.frame {
  margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--orange-fill);
  border: 2px solid var(--orange); box-shadow: 4px 4px 0 var(--orange-shadow);
}
.frame > :first-child { margin-top: 0; }
.frame > :last-child { margin-bottom: 0; }

/* The tooltip: a pixel box in the state color, with a stepped arrow. It pops up in two steps. Each [data-tip] in a
   .px-tips box has it, with tabindex="0" for the keyboard and a color in --state. The nodes of a diagram (.px-hots)
   use it too. */
.px-tips [data-tip] { position: relative; cursor: help; outline: none; }
:is(.px-tips, .px-hots) [data-tip]:is(:hover, :focus) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--state) 25%, transparent); }
:is(.px-tips, .px-hots) [data-tip]::before,
:is(.px-tips, .px-hots) [data-tip]::after {
  position: absolute; left: 50%; z-index: 20; pointer-events: none;
  opacity: 0; transform: translate(-50%, 4px);
  transition: opacity 0.12s steps(2, jump-none), transform 0.12s steps(2, jump-none);
}
:is(.px-tips, .px-hots) [data-tip]::after {
  content: attr(data-tip); bottom: calc(100% + 8px);
  width: max-content; max-width: 16rem; padding: 0.3rem 0.6rem; white-space: pre-line; text-align: center;
  font-size: 0.75rem; line-height: 1.4; color: var(--fg); background: var(--bg);
  border: 2px solid var(--state); box-shadow: 3px 3px 0 var(--pixel-shadow);
}
:is(.px-tips, .px-hots) [data-tip]::before {
  content: ""; bottom: calc(100% + 2px); width: 10px; height: 6px; background: var(--state);
  clip-path: polygon(0 0, 100% 0, 100% 2px, 80% 2px, 80% 4px, 60% 4px, 60% 6px, 40% 6px, 40% 4px, 20% 4px, 20% 2px, 0 2px);
}
:is(.px-tips, .px-hots) [data-tip]:is(:hover, :focus)::before,
:is(.px-tips, .px-hots) [data-tip]:is(:hover, :focus)::after { opacity: 1; transform: translate(-50%, 0); }

/* Text for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Pixel diagrams (pixa.js): an inline SVG with 1 art pixel for 2 CSS px. A node is a .frame in small: a
   1 px border, a dark fill and a hard shadow in its color. The sizes in the SVG are in art pixels. */
.px { margin: 2rem 0; }
/* A wide diagram goes out of the text column, up to 56rem. On a narrow screen it gets smaller to fit: it never scrolls. */
.px-canvas { --room: min(56rem, 100vw - 3rem); margin-inline: calc((100% - var(--room)) / 2); }
.px-stage { position: relative; width: min(100%, var(--max)); margin: 0 auto; }
.px svg { display: block; width: 100%; height: auto; font-kerning: none; }
/* A transparent box on each node has the tooltip of the node (the tooltip above). A hover, a tap or the
   keyboard shows it. Near the top of a diagram it opens below the node, so it stays on the diagram. Near a side it
   lines up with the node. */
.px-hots > span { position: absolute; cursor: help; outline: none; }
.px-hots [data-tip]::after { max-width: 18rem; text-align: left; }
.px-hots .below::after { bottom: auto; top: calc(100% + 8px); }
.px-hots .below::before { bottom: auto; top: calc(100% + 2px); scale: 1 -1; }
.px-hots .l::after { left: 0; translate: 50% 0; }
.px-hots .r::after { left: 100%; translate: -50% 0; }
/* On a phone the diagram is small, and a tooltip on a node could go off the screen. The tooltip is a panel at the
   bottom of the screen instead. The focus ring and the dim show the node. */
@media (max-width: 40rem) {
  .px-hots [data-tip]::before { display: none; }
  .px-hots [data-tip]::after, .px-hots [data-tip]:is(:hover, :focus)::after {
    position: fixed; inset: auto 1rem 1rem; width: auto; max-width: none; transform: none; translate: none;
  }
}
/* The color of a part: --c from pixa.js. A dim part of a hovered diagram gets --px-off in place of its colors, if the
   palette sets --px-dim-color (see "Palettes"). */
.px :is(.grp, .node, .wire, .tagged) { color: var(--px-off, var(--c)); }
.px .dot { fill: var(--fg); opacity: 0.035; }
.px .grp .edge { fill: none; stroke: currentColor; stroke-dasharray: 2 2; opacity: 0.45; }
.px .cut { fill: var(--bg); }
.px .tag { font-size: 6px; fill: currentColor; }
.px .tagged .tag { fill: var(--px-off, var(--muted)); }
.px .shade { fill: color-mix(in srgb, currentColor 35%, #000); }
.px .rim, .px .head, .px .badge, .px .ico path { fill: currentColor; }
.px .fill { fill: color-mix(in srgb, currentColor 13%, #000); }
.px .lbl { font-size: 7px; fill: var(--px-off, var(--fg)); }
.px .sub { font-size: 6px; fill: var(--px-off, var(--muted)); }
.px .num { font-size: 6px; fill: var(--bg); text-anchor: middle; }
.px .line { fill: none; stroke: currentColor; stroke-linecap: square; }
.px .dash { stroke-dasharray: 1 3; }
.px .ping, .px .packet { fill: var(--px-off, var(--fg)); opacity: 0; }
/* Sprite tones (see sprite() in art.js). b is the second frame of a two-frame loop, so it shows only with motion. */
.px .p2 { opacity: 0.55; }
.px .p3 { opacity: 0.25; }
.px .ico .pw { fill: var(--px-off, var(--fg)); }
.px .po { animation: blink 1.06s steps(1, end) infinite; }
.px .pO { animation: blink 1.06s steps(1, end) -0.53s infinite; }
.px .pa { animation: blink 0.4s steps(1, end) infinite; }
.px .pb { opacity: 0; animation: px-b 0.4s steps(1, end) infinite; }
@keyframes px-b { 50% { opacity: 1; } }
.px :is(.node, .wire, .tagged, .packet) { transition: opacity 0.12s steps(2, jump-none); }
@media (prefers-reduced-motion: reduce) {
  .px svg * { animation: none !important; transition: none !important; }
  :is(.px-tips, .px-hots) [data-tip]::before, :is(.px-tips, .px-hots) [data-tip]::after { transition: none; }
}
/* The steps under a diagram, with the numbered badges of the wires. */
.px-steps { list-style: none; padding: 0; margin: -0.5rem 0 2rem; font-size: 0.9rem; }
.px-steps li { display: flex; gap: 0.75rem; margin: 0.6rem 0; }
.px-n {
  flex: none; min-width: 1.5em; height: 1.5em; margin-top: 0.1em; padding: 0 0.3em;
  font-size: 0.8rem; line-height: 1.5em; text-align: center; color: var(--bg);
  clip-path: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px), 0 2px, 2px 2px);
}
.px figcaption { margin-top: 0.75rem; font-size: 0.8rem; color: var(--muted); text-align: center; }
/* The color key: a pixel square for each color, then the text. */
.px-key { white-space: nowrap; margin: 0 0.5rem; }
.px-key i { display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.15em; background: currentColor; }
.px-key i:last-of-type { margin-right: 0.5em; }

/* Palettes: <html data-palette="a-8">. With no data-palette, the page has the dark palette at the top of this file.
   A palette gives each color token from its own colors only, in light-dark(light, dark): the page follows the
   color scheme of the system, and data-theme="light" or "dark" on <html> sets it. --p-dark … --p-light are the two
   darkest and the two lightest colors, the same in both schemes (for an object such as paper). A bigger palette also
   gives each color two tones nearer to the page, --c-<name>-2 and --c-<name>-3: a diagram uses them for the shadow
   of a node and the shades of an icon. */
:root[data-palette] { color-scheme: light dark; scrollbar-color: var(--muted) var(--bg); --px-dim: 1; --px-dim-color: var(--rule);
  --px-dim-shade: var(--pixel-shadow); }
:root[data-palette][data-theme="light"] { color-scheme: light; }
:root[data-palette][data-theme="dark"] { color-scheme: dark; }
/* A-8: 0d0b08 131a17 1b2621 263d32 2b5744 377a5d 6bad92 95d9bc (greens, dark to light). */
:root[data-palette="a-8"] {
  --bg: light-dark(#95d9bc, #0d0b08); --fg: light-dark(#0d0b08, #95d9bc); --muted: light-dark(#2b5744, #6bad92);
  --rule: light-dark(#6bad92, #263d32); --code-bg: light-dark(#6bad92, #131a17);
  --pixel-shadow: light-dark(#377a5d, #1b2621);
  --orange: light-dark(#263d32, #95d9bc); --orange-shadow: light-dark(#377a5d, #2b5744);
  --orange-fill: light-dark(#6bad92, #1b2621);
  --c-red: light-dark(#2b5744, #6bad92); --c-orange: light-dark(#263d32, #95d9bc);
  --c-yellow: light-dark(#377a5d, #95d9bc); --c-green: light-dark(#1b2621, #6bad92);
  --c-teal: light-dark(#131a17, #95d9bc); --c-blue: light-dark(#2b5744, #377a5d);
  --c-purple: light-dark(#1b2621, #377a5d); --c-pink: light-dark(#377a5d, #6bad92);
  --p-dark: #0d0b08; --p-dark-2: #1b2621; --p-light-2: #6bad92; --p-light: #95d9bc;
}
/* B-8: 0d2b45 203c56 544e68 8d697a d08159 ffaa5e ffd4a3 ffecd6 (navy to cream). */
:root[data-palette="b-8"] {
  --bg: light-dark(#ffecd6, #0d2b45); --fg: light-dark(#0d2b45, #ffecd6); --muted: light-dark(#544e68, #d08159);
  --rule: light-dark(#ffd4a3, #544e68); --code-bg: light-dark(#ffd4a3, #203c56);
  --pixel-shadow: light-dark(#ffaa5e, #544e68);
  --orange: light-dark(#8d697a, #ffaa5e); --orange-shadow: light-dark(#ffaa5e, #8d697a);
  --orange-fill: light-dark(#ffd4a3, #203c56);
  --c-red: light-dark(#d08159, #d08159); --c-orange: light-dark(#d08159, #ffaa5e);
  --c-yellow: light-dark(#ffaa5e, #ffd4a3); --c-green: light-dark(#544e68, #8d697a);
  --c-teal: light-dark(#203c56, #ffecd6); --c-blue: light-dark(#0d2b45, #8d697a);
  --c-purple: light-dark(#8d697a, #8d697a); --c-pink: light-dark(#8d697a, #d08159);
  --p-dark: #0d2b45; --p-dark-2: #203c56; --p-light-2: #ffd4a3; --p-light: #ffecd6;
}
/* C-8: fcb08c ef9d7f d6938a b48d92 a597a1 8fa0bf 9aabc9 a5b7d4 (pastels). The best contrast is 1.64:1, so text is
   hard to read in both schemes. */
:root[data-palette="c-8"] {
  --bg: light-dark(#fcb08c, #b48d92); --fg: light-dark(#b48d92, #fcb08c); --muted: light-dark(#a597a1, #a5b7d4);
  --rule: light-dark(#ef9d7f, #a597a1); --code-bg: light-dark(#ef9d7f, #a597a1);
  --pixel-shadow: light-dark(#d6938a, #8fa0bf);
  --orange: light-dark(#8fa0bf, #ef9d7f); --orange-shadow: light-dark(#d6938a, #d6938a);
  --orange-fill: light-dark(#ef9d7f, #a597a1);
  --c-red: light-dark(#d6938a, #d6938a); --c-orange: light-dark(#b48d92, #ef9d7f);
  --c-yellow: light-dark(#a597a1, #fcb08c); --c-green: light-dark(#9aabc9, #9aabc9);
  --c-teal: light-dark(#a5b7d4, #a5b7d4); --c-blue: light-dark(#8fa0bf, #9aabc9);
  --c-purple: light-dark(#a597a1, #8fa0bf); --c-pink: light-dark(#b48d92, #ef9d7f);
  --p-dark: #8fa0bf; --p-dark-2: #a597a1; --p-light-2: #ef9d7f; --p-light: #fcb08c;
}
/* A-6: 46425e 15788c 00b9be ffeecc ffb0a3 ff6973. */
:root[data-palette="a-6"] {
  --bg: light-dark(#ffeecc, #46425e); --fg: light-dark(#46425e, #ffeecc); --muted: light-dark(#15788c, #ffb0a3);
  --rule: light-dark(#ffb0a3, #15788c); --code-bg: light-dark(#ffb0a3, #15788c);
  --pixel-shadow: light-dark(#00b9be, #15788c);
  --orange: light-dark(#15788c, #00b9be); --orange-shadow: light-dark(#00b9be, #15788c);
  --orange-fill: light-dark(#ffb0a3, #46425e);
  --c-red: light-dark(#ff6973, #ff6973); --c-orange: light-dark(#ff6973, #ffb0a3);
  --c-yellow: light-dark(#ff6973, #ffeecc); --c-green: light-dark(#15788c, #00b9be);
  --c-teal: light-dark(#00b9be, #00b9be); --c-blue: light-dark(#15788c, #00b9be);
  --c-purple: light-dark(#46425e, #ffb0a3); --c-pink: light-dark(#ff6973, #ff6973);
  --p-dark: #46425e; --p-dark-2: #15788c; --p-light-2: #ffb0a3; --p-light: #ffeecc;
}
/* B-6: e6d3b9 ebbd8c ea9971 d67782 9d5d7a 7b4255. */
:root[data-palette="b-6"] {
  --bg: light-dark(#e6d3b9, #7b4255); --fg: light-dark(#7b4255, #e6d3b9); --muted: light-dark(#9d5d7a, #ebbd8c);
  --rule: light-dark(#ebbd8c, #9d5d7a); --code-bg: light-dark(#ebbd8c, #9d5d7a);
  --pixel-shadow: light-dark(#ea9971, #9d5d7a);
  --orange: light-dark(#9d5d7a, #ea9971); --orange-shadow: light-dark(#ea9971, #d67782);
  --orange-fill: light-dark(#ebbd8c, #9d5d7a);
  --c-red: light-dark(#d67782, #d67782); --c-orange: light-dark(#d67782, #ea9971);
  --c-yellow: light-dark(#9d5d7a, #ebbd8c); --c-green: light-dark(#9d5d7a, #ebbd8c);
  --c-teal: light-dark(#7b4255, #e6d3b9); --c-blue: light-dark(#7b4255, #e6d3b9);
  --c-purple: light-dark(#9d5d7a, #d67782); --c-pink: light-dark(#d67782, #d67782);
  --p-dark: #7b4255; --p-dark-2: #9d5d7a; --p-light-2: #ebbd8c; --p-light: #e6d3b9;
}
/* A-16: 16 colors. */
:root[data-palette="a-16"] {
  --bg: light-dark(#d2c9a5, #4b3d44); --fg: light-dark(#4b3d44, #d2c9a5); --muted: light-dark(#574852, #8caba1);
  --code-bg: light-dark(#d1b187, #574852); --rule: light-dark(#ab9b8e, #4b726e);
  --pixel-shadow: light-dark(#8caba1, #79444a); --c-red: light-dark(#79444a, #d1b187);
  --c-red-2: light-dark(#ae5d40, #c77b58); --c-red-3: light-dark(#ab9b8e, #79444a);
  --c-orange: light-dark(#79444a, #d1b187); --c-orange-2: light-dark(#927441, #c77b58);
  --c-orange-3: light-dark(#ab9b8e, #ae5d40); --c-yellow: light-dark(#79444a, #d2c9a5);
  --c-yellow-2: light-dark(#927441, #ba9158); --c-yellow-3: light-dark(#b3a555, #77743b);
  --c-green: light-dark(#4b726e, #d2c9a5); --c-green-2: light-dark(#ba9158, #77743b);
  --c-green-3: light-dark(#b3a555, #77743b); --c-teal: light-dark(#4b726e, #8caba1);
  --c-teal-2: light-dark(#8caba1, #4b726e); --c-teal-3: light-dark(#8caba1, #4b726e);
  --c-blue: light-dark(#4b726e, #8caba1); --c-blue-2: light-dark(#8caba1, #4b726e);
  --c-blue-3: light-dark(#8caba1, #4b726e); --c-purple: light-dark(#79444a, #8caba1);
  --c-purple-2: light-dark(#ae5d40, #ae5d40); --c-purple-3: light-dark(#8caba1, #574852);
  --c-pink: light-dark(#79444a, #d1b187); --c-pink-2: light-dark(#ae5d40, #c77b58);
  --c-pink-3: light-dark(#ab9b8e, #79444a); --orange: light-dark(#79444a, #d1b187);
  --orange-shadow: light-dark(#927441, #c77b58); --orange-fill: light-dark(#ab9b8e, #ae5d40);
  --p-dark: #4b3d44; --p-dark-2: #4d4539; --p-light-2: #d1b187; --p-light: #d2c9a5;
}

/* B-16: 16 colors. */
:root[data-palette="b-16"] {
  --bg: light-dark(#fff7e4, #28282e); --fg: light-dark(#28282e, #fff7e4); --muted: light-dark(#6c5671, #87a889);
  --code-bg: light-dark(#ffe6c6, #6c5671); --rule: light-dark(#d9c8bf, #6c5671);
  --pixel-shadow: light-dark(#d9c8bf, #87a889); --c-red: light-dark(#6c5671, #f98284);
  --c-red-2: light-dark(#f98284, #6c5671); --c-red-3: light-dark(#f98284, #6c5671);
  --c-orange: light-dark(#6c5671, #d9c8bf); --c-orange-2: light-dark(#dea38b, #dea38b);
  --c-orange-3: light-dark(#d9c8bf, #6c5671); --c-yellow: light-dark(#6c5671, #fff7a0);
  --c-yellow-2: light-dark(#dea38b, #dea38b); --c-yellow-3: light-dark(#ffc384, #6c5671);
  --c-green: light-dark(#28282e, #b0eb93); --c-green-2: light-dark(#87a889, #87a889);
  --c-green-3: light-dark(#87a889, #87a889); --c-teal: light-dark(#28282e, #b3e3da);
  --c-teal-2: light-dark(#87a889, #87a889); --c-teal-3: light-dark(#87a889, #6c5671);
  --c-blue: light-dark(#28282e, #accce4); --c-blue-2: light-dark(#6c5671, #b0a9e4);
  --c-blue-3: light-dark(#b0a9e4, #6c5671); --c-purple: light-dark(#6c5671, #b0a9e4);
  --c-purple-2: light-dark(#b0a9e4, #6c5671); --c-purple-3: light-dark(#b0a9e4, #6c5671);
  --c-pink: light-dark(#6c5671, #feaae4); --c-pink-2: light-dark(#f98284, #f98284);
  --c-pink-3: light-dark(#feaae4, #6c5671); --orange: light-dark(#6c5671, #d9c8bf);
  --orange-shadow: light-dark(#dea38b, #dea38b); --orange-fill: light-dark(#d9c8bf, #6c5671);
  --p-dark: #28282e; --p-dark-2: #6c5671; --p-light-2: #fff7a0; --p-light: #fff7e4;
}

/* C-16: 16 colors. */
:root[data-palette="c-16"] {
  --bg: light-dark(#ddcf99, #4b3d44); --fg: light-dark(#4b3d44, #ddcf99); --muted: light-dark(#645355, #a99c8d);
  --code-bg: light-dark(#cca87b, #774251); --rule: light-dark(#a99c8d, #645355);
  --pixel-shadow: light-dark(#a99c8d, #645355); --c-red: light-dark(#774251, #cca87b);
  --c-red-2: light-dark(#8c7c79, #8c7c79); --c-red-3: light-dark(#a99c8d, #9c524e);
  --c-orange: light-dark(#846d59, #cca87b); --c-orange-2: light-dark(#a88a5e, #846d59);
  --c-orange-3: light-dark(#cca87b, #846d59); --c-yellow: light-dark(#846d59, #ddcf99);
  --c-yellow-2: light-dark(#a88a5e, #a88a5e); --c-yellow-3: light-dark(#cca87b, #7d7b62);
  --c-green: light-dark(#846d59, #8e9f7d); --c-green-2: light-dark(#8e9f7d, #7d7b62);
  --c-green-3: light-dark(#8e9f7d, #7d7b62); --c-teal: light-dark(#4e5463, #8e9f7d);
  --c-teal-2: light-dark(#5b7d73, #5b7d73); --c-teal-3: light-dark(#5b7d73, #5b7d73);
  --c-blue: light-dark(#4e5463, #8e9f7d); --c-blue-2: light-dark(#5b7d73, #5b7d73);
  --c-blue-3: light-dark(#5b7d73, #4e5463); --c-purple: light-dark(#774251, #cca87b);
  --c-purple-2: light-dark(#5b7d73, #5b7d73); --c-purple-3: light-dark(#a99c8d, #4e5463);
  --c-pink: light-dark(#774251, #cca87b); --c-pink-2: light-dark(#8c7c79, #8c7c79);
  --c-pink-3: light-dark(#a99c8d, #774251); --orange: light-dark(#846d59, #cca87b);
  --orange-shadow: light-dark(#a88a5e, #846d59); --orange-fill: light-dark(#cca87b, #846d59);
  --p-dark: #4b3d44; --p-dark-2: #774251; --p-light-2: #cca87b; --p-light: #ddcf99;
}

/* D-16: 16 colors. */
:root[data-palette="d-16"] {
  --bg: light-dark(#bcb7a5, #313432); --fg: light-dark(#313432, #bcb7a5); --muted: light-dark(#454b4b, #a6a296);
  --code-bg: light-dark(#b4ab8f, #323e42); --rule: light-dark(#998579, #625055);
  --pixel-shadow: light-dark(#a6a296, #454b4b); --c-red: light-dark(#7c4545, #ac9086);
  --c-red-2: light-dark(#998579, #7c4545); --c-red-3: light-dark(#ac9086, #7c4545);
  --c-orange: light-dark(#675239, #ac9086); --c-orange-2: light-dark(#9e805c, #796c64);
  --c-orange-3: light-dark(#ac9086, #675239); --c-yellow: light-dark(#675239, #b4ab8f);
  --c-yellow-2: light-dark(#718245, #718245); --c-yellow-3: light-dark(#ac9086, #675239);
  --c-green: light-dark(#3a5f3b, #b4ab8f); --c-green-2: light-dark(#718245, #718245);
  --c-green-3: light-dark(#718245, #3a5f3b); --c-teal: light-dark(#454b4b, #b4ab8f);
  --c-teal-2: light-dark(#516b43, #718245); --c-teal-3: light-dark(#718245, #454b4b);
  --c-blue: light-dark(#323e42, #ac9086); --c-blue-2: light-dark(#454b4b, #323e42);
  --c-blue-3: light-dark(#718245, #323e42); --c-purple: light-dark(#7c4545, #ac9086);
  --c-purple-2: light-dark(#625055, #625055); --c-purple-3: light-dark(#ac9086, #625055);
  --c-pink: light-dark(#7c4545, #ac9086); --c-pink-2: light-dark(#625055, #625055);
  --c-pink-3: light-dark(#ac9086, #625055); --orange: light-dark(#675239, #ac9086);
  --orange-shadow: light-dark(#9e805c, #796c64); --orange-fill: light-dark(#ac9086, #675239);
  --p-dark: #313432; --p-dark-2: #323e42; --p-light-2: #b4ab8f; --p-light: #bcb7a5;
}

/* D-16-plus: D-16 and 17 more colors in its hues: a darker page 111111, the cream d8d5c5 for the page and the text,
   a light and more saturated tone of red, orange, olive, green, teal, blue and mauve for the dark page, a dark
   orange, teal and blue for the light page, a dark orange tone, and a violet with its tones for both pages.
   Each hue has its own color in both schemes. */
:root[data-palette="d-16-plus"] {
  --bg: light-dark(#d8d5c5, #111111); --fg: light-dark(#111111, #d8d5c5); --code-bg: light-dark(#bcb7a5, #313432);
  --muted: light-dark(#625055, #a6a296); --rule: light-dark(#a6a296, #454b4b);
  --pixel-shadow: light-dark(#b4ab8f, #323e42); --c-red: light-dark(#7c4545, #ce8c87);
  --c-red-2: light-dark(#998579, #7c4545); --c-red-3: light-dark(#ce8c87, #7c4545);
  --c-orange: light-dark(#7a4624, #d9945e); --c-orange-2: light-dark(#9e805c, #796c64);
  --c-orange-3: light-dark(#d9945e, #6b4328); --c-yellow: light-dark(#675239, #a0b14c);
  --c-yellow-2: light-dark(#9e805c, #718245); --c-yellow-3: light-dark(#b4ab8f, #675239);
  --c-green: light-dark(#3a5f3b, #76b16d); --c-green-2: light-dark(#718245, #516b43);
  --c-green-3: light-dark(#76b16d, #3a5f3b); --c-teal: light-dark(#2f5653, #75b4ac);
  --c-teal-2: light-dark(#75b4ac, #2f5653); --c-teal-3: light-dark(#75b4ac, #454b4b);
  --c-blue: light-dark(#39526a, #79a1c3); --c-blue-2: light-dark(#79a1c3, #39526a);
  --c-blue-3: light-dark(#79a1c3, #323e42); --c-purple: light-dark(#5a3995, #ad90df);
  --c-purple-2: light-dark(#ae9acf, #593c8c); --c-purple-3: light-dark(#ae9acf, #593c8c);
  --c-pink: light-dark(#7c4545, #ce8c87); --c-pink-2: light-dark(#b992a5, #625055);
  --c-pink-3: light-dark(#b992a5, #625055); --orange: light-dark(#7a4624, #d9945e);
  --orange-shadow: light-dark(#9e805c, #796c64); --orange-fill: light-dark(#d9945e, #6b4328);
  --p-dark: #111111; --p-dark-2: #313432; --p-light-2: #bcb7a5; --p-light: #d8d5c5;
}
/* A-64: 64 colors. */
:root[data-palette="a-64"] {
  --bg: light-dark(#f7f3f7, #000000); --fg: light-dark(#000000, #f7f3f7); --muted: light-dark(#5a6152, #ada29c);
  --code-bg: light-dark(#efe3de, #525152); --rule: light-dark(#b5b2b5, #525152);
  --pixel-shadow: light-dark(#d6c2ad, #5a6152); --c-red: light-dark(#9c615a, #e6717b);
  --c-red-2: light-dark(#e6717b, #845942); --c-red-3: light-dark(#efaa94, #845942);
  --c-orange: light-dark(#845942, #c59a7b); --c-orange-2: light-dark(#b59273, #845942);
  --c-orange-3: light-dark(#d6c2ad, #845942); --c-yellow: light-dark(#6b693a, #efe3b5);
  --c-yellow-2: light-dark(#9c9a52, #947152); --c-yellow-3: light-dark(#d6ba73, #6b693a);
  --c-green: light-dark(#5a7131, #7ba24a); --c-green-2: light-dark(#7ba24a, #5a6152);
  --c-green-3: light-dark(#adc363, #5a6152); --c-teal: light-dark(#3a698c, #a5dbe7);
  --c-teal-2: light-dark(#7b929c, #6b7984); --c-teal-3: light-dark(#a5dbe7, #3a698c);
  --c-blue: light-dark(#3a698c, #84aade); --c-blue-2: light-dark(#739ade, #3a698c);
  --c-blue-3: light-dark(#9cbae7, #3a698c); --c-purple: light-dark(#7b6194, #9479ad);
  --c-purple-2: light-dark(#b592bd, #7b6194); --c-purple-3: light-dark(#bdaae6, #7b6194);
  --c-pink: light-dark(#9c615a, #efbad6); --c-pink-2: light-dark(#de81bd, #c6616b);
  --c-pink-3: light-dark(#efbad6, #525152); --orange: light-dark(#845942, #c59a7b);
  --orange-shadow: light-dark(#b59273, #845942); --orange-fill: light-dark(#d6c2ad, #845942);
  --p-dark: #000000; --p-dark-2: #525152; --p-light-2: #e6ebde; --p-light: #f7f3f7;
}
/* With a palette, no style mixes or fades a color: each tone is a palette color. */
[data-palette] ::selection { color: var(--bg); background: var(--fg); }
[data-palette] ::placeholder { color: var(--muted); opacity: 1; }
[data-palette] :is(.px-tips, .px-hots) [data-tip]:is(:hover, :focus) { box-shadow: 0 0 0 2px var(--rule); }
[data-palette] .px .dot { fill: var(--code-bg); opacity: 1; }
[data-palette] .px .grp .edge { opacity: 1; }
[data-palette] .px .shade { fill: var(--px-off-2, var(--c2, var(--pixel-shadow))); }
/* A node has the page color: a dim node is then an outline in --rule, also where --rule and --code-bg are one color. */
[data-palette] .px .fill { fill: var(--bg); }
[data-palette] .px .p2 { fill: var(--px-off, var(--c2, var(--muted))); opacity: 1; }
[data-palette] .px .p3 { fill: var(--px-off, var(--c3, var(--rule))); opacity: 1; }