/* Dark Mode Styles for Tale Theme */

:root {
  /* Light mode colors (default) */
  --bg-color: #fff;
  --text-color: #555;
  --heading-color: #333;
  --link-color: #4a9ae1;
  --link-hover-color: #1e70bf;
  --code-bg: #f9f9f9;
  --code-border: #e5e5e5;
  --border-color: #e5e5e5;
  --nav-color: #aaa;
  --nav-hover-color: #222;
  --footer-color: #ccc;
  --catalogue-date-color: #aaa;
  --code-text-color: #bf616a;
  --pre-text-color: inherit;
  --title-color: #353535;
  --nav-title-color: #000;
  --nav-link-color: #000;
  --nav-link-hover-color: #444;
  --share-color: #000;
  --share-shadow: rgba(0, 0, 0, 0.2);
  --share-shadow-hover: rgba(0, 0, 0, 0.3);
  --share-feedback-bg: #333;
  --share-feedback-color: #fff;
  /* Syntax highlighting (Rouge). Light values equal Tale's own palette. */
  --syntax-keyword: #069;
  --syntax-type: #078;
  --syntax-string: #c30;
  --syntax-string-plain: #d44950;
  --syntax-comment: #999;
  --syntax-comment-multi: #09f;
  --syntax-preproc: #099;
  --syntax-number: #f60;
  --syntax-builtin: #366;
  --syntax-function: #c0f;
  --syntax-class: #0a8;
  --syntax-namespace: #0cf;
  --syntax-tag: #2f6f9f;
  --syntax-attribute: #4f9fcf;
  --syntax-variable: #033;
  --syntax-decorator: #99f;
  --syntax-constant: #360;
  --syntax-operator: #555;
  --syntax-operator-word: #000;
  --syntax-prompt: #009;
  --syntax-output: #aaa;
  --syntax-lineno: #aaa;
  --panel-bg: rgba(255, 255, 255, 0.92);
}

/* Dark mode colors */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #d4d4d4;
  --heading-color: #ffffff;
  --link-color: #6bb6ff;
  --link-hover-color: #9cd1ff;
  --code-bg: #0d0d0d;
  --code-text-color: #9a9a9a;
  --code-border: #2a2a2a;
  --border-color: #404040;
  --nav-color: #888;
  --nav-hover-color: #e8e8e8;
  --footer-color: #666;
  --catalogue-date-color: #888;
  --pre-text-color: #9a9a9a;
  --title-color: #fff;
  --nav-title-color: #fff;
  --nav-link-color: #fff;
  --nav-link-hover-color: #e8e8e8;
  --share-color: #fff;
  --share-shadow: rgba(255, 255, 255, 0.1);
  --share-shadow-hover: rgba(255, 255, 255, 0.2);
  --share-feedback-bg: #555;
  --share-feedback-color: #fff;
  --syntax-keyword: #79b8ff;
  --syntax-type: #56d4dd;
  --syntax-string: #ffab70;
  --syntax-string-plain: #ffab70;
  --syntax-comment: #8b949e;
  --syntax-comment-multi: #8b949e;
  --syntax-preproc: #8b949e;
  --syntax-number: #f8c555;
  --syntax-builtin: #56d4dd;
  --syntax-function: #d2a8ff;
  --syntax-class: #7ee787;
  --syntax-namespace: #79c0ff;
  --syntax-tag: #7ee787;
  --syntax-attribute: #79c0ff;
  --syntax-variable: #ffa657;
  --syntax-decorator: #d2a8ff;
  --syntax-constant: #7ee787;
  --syntax-operator: #d4d4d4;
  --syntax-operator-word: #79b8ff;
  --syntax-prompt: #8b949e;
  --syntax-output: #8b949e;
  --syntax-lineno: #6e7681;
  --panel-bg: rgba(26, 26, 26, 0.92);
}

/* Apply color variables to elements */
html {
  height: 100%;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
}

a {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-hover-color);
}

code {
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
  color: var(--code-text-color);
}

pre {
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
}

pre code {
  color: var(--pre-text-color);
  background-color: transparent;
  border: none;
}

/* Rouge code boxes: Tale hard-codes a light box and palette; read the tokens
   instead so dark mode gets a dark box and a readable palette. */
.highlight {
  background-color: var(--code-bg);
}

.highlight .lineno { color: var(--syntax-lineno); }
.highlight .c, .highlight .c1, .highlight .cs, .highlight .ni { color: var(--syntax-comment); }
.highlight .cm { color: var(--syntax-comment-multi); }
.highlight .cp { color: var(--syntax-preproc); }
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr { color: var(--syntax-keyword); }
.highlight .kt { color: var(--syntax-type); }
.highlight .o { color: var(--syntax-operator); }
.highlight .ow { color: var(--syntax-operator-word); }
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il { color: var(--syntax-number); }
.highlight .s { color: var(--syntax-string-plain); }
.highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1 { color: var(--syntax-string); }
.highlight .na { color: var(--syntax-attribute); }
.highlight .nb, .highlight .bp { color: var(--syntax-builtin); }
.highlight .nc { color: var(--syntax-class); }
.highlight .no { color: var(--syntax-constant); }
.highlight .nd, .highlight .nl { color: var(--syntax-decorator); }
.highlight .nf { color: var(--syntax-function); }
.highlight .nn { color: var(--syntax-namespace); }
.highlight .nt { color: var(--syntax-tag); }
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi { color: var(--syntax-variable); }
.highlight .gp { color: var(--syntax-prompt); }
.highlight .go { color: var(--syntax-output); }

/* Page and post titles. Same specificity as Tale's rules; this sheet loads later. */
.post-title,
.page-title,
.catalogue-title,
.tags-header-title,
h1.post-title {
  color: var(--title-color);
}

/* Small screens: Tale keeps the 4rem title and justified text at every width,
   which clips long title words and opens wide gaps between words. */
@media (max-width: 599px) {
  .post-title,
  .tags-header-title {
    font-size: 2.25rem;
    line-height: 1.2;
    overflow-wrap: break-word;
  }

  .post p {
    text-align: left;
  }
}

/* Long links and inline code wrap; code blocks scroll inside their box. */
.post {
  overflow-wrap: break-word;
}

pre {
  overflow-x: auto;
}

/* Navigation title and links */
.nav-title,
.nav-container h2 {
  color: var(--nav-title-color);
}

.nav a {
  color: var(--nav-link-color);
}

.nav a:hover {
  color: var(--nav-link-hover-color);
}

/* Reference side notes (sidenotes.js): a copy of a footnote shown beside or
   under the paragraph that cites it. */
.post.has-sidenotes {
  position: relative;
}

.sidenote {
  position: relative;
  margin: 0.75rem 0 1rem;
  padding: 0.6rem 2rem 0.6rem 0.9rem;
  border-left: 3px solid var(--link-color);
  border-radius: 0 6px 6px 0;
  background: var(--code-bg);
  color: var(--text-color);
  font-size: 0.85rem;
  line-height: 1.5;
  animation: sidenote-in 0.2s ease;
}

.sidenote--wide {
  position: absolute;
  left: 100%;
  margin: 0 0 0 2rem;
}

.sidenote-number {
  margin-right: 0.4rem;
  font-weight: bold;
  color: var(--heading-color);
}

.sidenote-body {
  display: inline;
}

.sidenote-body p {
  display: inline;
  margin: 0;
  text-align: left;
}

.sidenote-close {
  position: absolute;
  top: 0.2rem;
  right: 0.45rem;
  border: none;
  background: none;
  color: var(--catalogue-date-color);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.sidenote-close:hover,
.sidenote-close:focus {
  color: var(--heading-color);
}

.footnote.is-active {
  padding: 0 0.25em;
  border-radius: 3px;
  background: var(--border-color);
  color: var(--heading-color);
}

@keyframes sidenote-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Share button styles - fixed floating button */
.share-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 10px var(--share-shadow);
  color: var(--share-color);
}

.share-button:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 15px var(--share-shadow-hover);
}

.share-button:active {
  transform: scale(0.95);
}

.share-button svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Share feedback tooltip */
.share-feedback {
  position: absolute;
  bottom: 60px;
  right: 0;
  background-color: var(--share-feedback-bg);
  color: var(--share-feedback-color);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.share-feedback.show {
  opacity: 1;
}

.catalogue-time {
  color: var(--catalogue-date-color);
}

/* Home page post list: only the title is a link, so it is the only underlined text. */
.catalogue-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

.catalogue-title a:hover,
.catalogue-title a:focus {
  color: var(--link-hover-color);
}

.pagination {
  border-top: 1px solid var(--border-color);
}

.pagination .top {
  border-top: 1px solid var(--border-color);
}

/* Sticky footer at bottom */
nav {
  flex-shrink: 0;
}

main {
  flex: 1 0 auto;
}

footer {
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  margin-top: auto;
}

footer span {
  color: var(--footer-color);
}

/* Animated backdrop canvas: created by backdrop.js only while color is on. */
.backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.backdrop.is-on {
  opacity: 1;
}

/* Tags page layout */
.tags-page {
  display: grid;
  gap: 2rem;
}

.tag-index h2 {
  margin-top: 0;
}

.tag-chip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-chip-list li {
  margin: 0;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--code-bg);
  color: var(--text-color);
  font-size: 0.9rem;
  text-decoration: none;
}

.tag-chip:hover,
.tag-chip:focus {
  color: var(--link-hover-color);
}

.tag-count {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--border-color);
  color: var(--heading-color);
  font-size: 0.8rem;
  text-align: center;
}

.tag-section {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.tag-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.tag-heading {
  margin-top: 0;
}

.tag-posts {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.tag-posts li {
  margin: 0.35rem 0;
}

.tag-date {
  color: var(--catalogue-date-color);
  font-size: 0.9rem;
  margin-right: 0.5rem;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .tags-page {
    grid-template-columns: 220px 1fr;
    align-items: start;
  }

  .tag-chip-list {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Tags constellation: hidden on small screens, empty without JavaScript. */
.constellation {
  display: none;
  margin: 0 0 2rem;
}

@media (min-width: 600px) {
  .constellation {
    display: block;
  }
}

.constellation svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.constellation .link {
  stroke: var(--border-color);
  stroke-width: 1;
  transition: opacity 0.2s ease;
}

.constellation .node {
  cursor: grab;
  transition: opacity 0.2s ease;
}

.constellation .node:active {
  cursor: grabbing;
}

.constellation .node .shape {
  fill: var(--bg-color);
  stroke: var(--heading-color);
  stroke-width: 2;
}

.constellation .node--post .shape {
  stroke: var(--text-color);
  stroke-width: 1.5;
}

.constellation .label {
  fill: var(--text-color);
  font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
  font-size: 13px;
  pointer-events: none;
}

.constellation .node--post .label {
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.constellation .node--post.is-lit .label {
  opacity: 1;
}

.constellation .is-dim {
  opacity: 0.3;
}

/* Keyboard shortcut help dialog (opened with "?") */
.shortcuts {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0;
  background: var(--bg-color);
  color: var(--text-color);
  width: min(32rem, calc(100vw - 2rem));
  box-shadow: 0 8px 30px var(--share-shadow);
}

.shortcuts::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.shortcuts-panel {
  position: relative;
  padding: 1.5rem 1.75rem 1.25rem;
}

.shortcuts-title {
  margin: 0 0 1rem;
  font-size: 1.2rem;
}

.shortcuts-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem 2rem;
}

.shortcuts-groups h3 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--catalogue-date-color);
}

.shortcuts dl {
  margin: 0;
}

.shortcuts dl > div {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0.35rem 0;
}

.shortcuts dt {
  min-width: 3.5rem;
  white-space: nowrap;
}

.shortcuts dd {
  margin: 0;
}

.shortcuts kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.1em 0.4em;
  border: 1px solid var(--border-color);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--code-bg);
  color: var(--heading-color);
  font-family: Menlo, Monaco, monospace;
  font-size: 0.85em;
  text-align: center;
}

.shortcuts-hint {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--catalogue-date-color);
}

.shortcuts-close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  border: none;
  background: none;
  color: var(--catalogue-date-color);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.shortcuts-close:hover,
.shortcuts-close:focus {
  color: var(--heading-color);
}

/* Theme axis buttons in the nav */
.nav ul li {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.nav-toggles {
  display: inline-flex;
  gap: 0.75rem;
  vertical-align: middle;
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: inline-flex;
  color: var(--nav-link-color);
  line-height: 0;
  transition: transform 0.2s ease;
}

.theme-toggle:hover {
  transform: scale(1.15);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle svg {
  display: block;
}

/* Each button shows the icon for the state a click produces. */
.theme-toggle [data-when] {
  display: none;
}

:root:not([data-theme="dark"]) .theme-toggle[data-toggle="theme"] [data-when="light"],
[data-theme="dark"] .theme-toggle[data-toggle="theme"] [data-when="dark"],
:root:not([data-color="on"]) .theme-toggle[data-toggle="color"] [data-when="off"],
[data-color="on"] .theme-toggle[data-toggle="color"] [data-when="on"],
:root:not([data-style="pixel"]) .theme-toggle[data-toggle="style"] [data-when="smooth"],
[data-style="pixel"] .theme-toggle[data-toggle="style"] [data-when="pixel"] {
  display: block;
}

/* ------------------------------------------------------------------ */
/* Color axis: rainbow accents. Body text, page background and code   */
/* blocks stay neutral; everything that is already an accent carries  */
/* the rainbow. Nothing here applies while data-color is off.         */
/* ------------------------------------------------------------------ */

/* Light stops are darkened until each sits at or near 3:1 on white, so
   gradient headings stay readable; the hue order is unchanged. */
[data-color="on"] {
  --rainbow: linear-gradient(90deg, #e0312a, #e07800, #c99700, #1f9d4d, #1f8fbf, #0a5ed1, #8e3fc4);
  --rainbow-border: var(--rainbow);
  --link-color: #d81b9a;
  --link-hover-color: #ff2fb3;
  --rainbow-stop-1: #e0312a;
  --rainbow-stop-2: #e07800;
  --rainbow-stop-3: #c99700;
  --rainbow-stop-4: #1f9d4d;
  --rainbow-stop-5: #1f8fbf;
  --rainbow-stop-6: #0a5ed1;
  --rainbow-stop-7: #8e3fc4;
}

[data-color="on"][data-theme="dark"] {
  --rainbow: linear-gradient(90deg, #ff6b6b, #ffa94d, #ffe066, #69db7c, #66d9e8, #74c0fc, #d0bfff);
  --rainbow-border: linear-gradient(90deg, #ff6b6bbf, #ffa94dbf, #ffe066bf, #69db7cbf, #66d9e8bf, #74c0fcbf, #d0bfffbf);
  --link-color: #3fd6ff;
  --link-hover-color: #8ae6ff;
  --rainbow-stop-1: #ff6b6b;
  --rainbow-stop-2: #ffa94d;
  --rainbow-stop-3: #ffe066;
  --rainbow-stop-4: #69db7c;
  --rainbow-stop-5: #66d9e8;
  --rainbow-stop-6: #74c0fc;
  --rainbow-stop-7: #d0bfff;
}

/* Headings and the site title: rainbow text fill. Engines without
   background-clip: text never enter this block and keep solid headings. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  [data-color="on"] h1,
  [data-color="on"] h2,
  [data-color="on"] h3,
  [data-color="on"] h4,
  [data-color="on"] h5,
  [data-color="on"] h6,
  [data-color="on"] .nav-title,
  [data-color="on"] .catalogue-title a {
    background-image: var(--rainbow);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* The home-page title's <a> carries the gradient and the animation; the
     h1 around it must not paint a second, unanimated copy underneath. */
  [data-color="on"] h1.catalogue-title {
    background-image: none;
  }

  /* Selected gradient text would otherwise be invisible: paint it solid. */
  [data-color="on"] h1::selection,
  [data-color="on"] h2::selection,
  [data-color="on"] h3::selection,
  [data-color="on"] h4::selection,
  [data-color="on"] h5::selection,
  [data-color="on"] h6::selection,
  [data-color="on"] .nav-title::selection,
  [data-color="on"] .catalogue-title a::selection {
    -webkit-text-fill-color: var(--heading-color);
    color: var(--heading-color);
  }
}

/* Shrink gradient headings to their text so the whole spectrum lands on the glyphs. */
[data-color="on"] h1,
[data-color="on"] h2,
[data-color="on"] h3,
[data-color="on"] h4,
[data-color="on"] h5,
[data-color="on"] h6 {
  width: fit-content;
  max-width: 100%;
}

[data-color="on"] .post-title {
  margin-left: auto;
  margin-right: auto;
}

/* Post title underline on the home page and link underlines on hover. */
[data-color="on"] .catalogue-title a {
  text-decoration: none;
  border-bottom: 0.1em solid transparent;
  border-image: var(--rainbow) 1;
}

[data-color="on"] .catalogue-title a:hover,
[data-color="on"] .catalogue-title a:focus {
  border-bottom-width: 0.18em;
}

[data-color="on"] .post a:hover,
[data-color="on"] .post a:focus {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  border-image: var(--rainbow) 1;
}

/* The three thick straight lines. */
[data-color="on"] .catalogue-line,
[data-color="on"] .post-line,
[data-color="on"] .tags-header-line {
  border-image: var(--rainbow) 1;
}

/* Thin single-side rules: border-image snaps unreliably at sub-pixel row
   heights (confirmed via getBoundingClientRect on the tags page — bottoms
   land on fractional positions and Chromium drops the border-image on some
   of them while the grey border-color fallback stays visible). A strip drawn
   as an ::after does not depend on border snapping, and being its own box it
   can carry the hue cycle without filtering the whole section. */
[data-color="on"] .catalogue-item,
[data-color="on"] .tag-section {
  position: relative;
  border-bottom-color: transparent;
}

[data-color="on"] .catalogue-item::after,
[data-color="on"] .tag-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--rainbow);
  pointer-events: none;
}

[data-color="on"] .catalogue-item:last-child::after,
[data-color="on"] .tag-section:last-child::after {
  content: none;
}

/* .pagination is already position: relative (its arrows are absolute), and
   .pagination .top is an inline link that needs a box to hang a strip on. */
[data-color="on"] .pagination,
[data-color="on"] footer {
  position: relative;
}

[data-color="on"] .pagination .top {
  position: relative;
  display: inline-block;
}

[data-color="on"] .pagination,
[data-color="on"] .pagination .top,
[data-color="on"] footer {
  border-top-color: transparent;
}

[data-color="on"] .pagination::after,
[data-color="on"] .pagination .top::after,
[data-color="on"] footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--rainbow);
  pointer-events: none;
}

/* Rounded elements: a masked gradient ring drawn as ::before, so the hue
   cycle rides the ring alone and never filters the element's contents. */
[data-color="on"] .tag-chip {
  position: relative;
  border-color: transparent;
  background: var(--code-bg);
}

[data-color="on"] .project-card,
[data-color="on"] .share-button {
  border-color: transparent;
  background: var(--bg-color);
}

[data-color="on"] .project-card {
  position: relative;
}

[data-color="on"] .tag-chip::before,
[data-color="on"] .project-card::before,
[data-color="on"] .share-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--rainbow-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* The share button is already position: fixed. Its ring is a positioned
   child, so the icon and the tooltip need to be lifted above it. */
[data-color="on"] .share-button::before {
  padding: 2px;
}

[data-color="on"] .share-button svg {
  position: relative;
  z-index: 1;
}

[data-color="on"] .share-feedback {
  z-index: 2;
}

/* One shared hue cycle so every accent moves together. A filter rotates the
   rendered colors, so text is not repainted. Only leaf accents and the
   pseudo-elements above are animated: a filter on a container would compose
   with its children's and cycle the ordinary links inside it as well.
   Reduced motion pauses it. */
@keyframes rainbow-cycle {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

[data-color="on"] {
  --rainbow-play: running;
  --rainbow-timing: linear;
}

@media (prefers-reduced-motion: reduce) {
  [data-color="on"] {
    --rainbow-play: paused;
  }

  .sidenote {
    animation: none;
  }

  .backdrop { transition: none; }

  .constellation .node, .constellation .link, .constellation .node--post .label { transition: none; }
}

[data-color="on"] h1:not(.catalogue-title),
[data-color="on"] h2,
[data-color="on"] h3,
[data-color="on"] h4,
[data-color="on"] h5,
[data-color="on"] h6,
[data-color="on"] .nav-title,
[data-color="on"] .catalogue-title a,
[data-color="on"] .catalogue-line,
[data-color="on"] .post-line,
[data-color="on"] .tags-header-line,
[data-color="on"] .catalogue-item::after,
[data-color="on"] .tag-section::after,
[data-color="on"] .pagination::after,
[data-color="on"] .pagination .top::after,
[data-color="on"] footer::after,
[data-color="on"] .tag-chip::before,
[data-color="on"] .project-card::before,
[data-color="on"] .share-button::before {
  animation: rainbow-cycle 12s var(--rainbow-timing) infinite;
  animation-play-state: var(--rainbow-play);
}

/* Dark: a faint glow so gradient text does not look muddy on near-black.
   drop-shadow follows the glyph alpha, so it never tints the fill itself. */
[data-color="on"][data-theme="dark"] h1:not(.catalogue-title),
[data-color="on"][data-theme="dark"] h2,
[data-color="on"][data-theme="dark"] h3,
[data-color="on"][data-theme="dark"] .nav-title,
[data-color="on"][data-theme="dark"] .catalogue-title a {
  animation-name: rainbow-cycle-glow;
}

@keyframes rainbow-cycle-glow {
  from { filter: hue-rotate(0deg) drop-shadow(0 0 6px rgba(255, 255, 255, 0.22)); }
  to { filter: hue-rotate(360deg) drop-shadow(0 0 6px rgba(255, 255, 255, 0.22)); }
}

/* Print: solid headings, no gradient fill and no animation. */
@media print {
  [data-color="on"] h1,
  [data-color="on"] h2,
  [data-color="on"] h3,
  [data-color="on"] h4,
  [data-color="on"] h5,
  [data-color="on"] h6,
  [data-color="on"] .nav-title,
  [data-color="on"] .catalogue-title a {
    background-image: none;
    color: var(--heading-color);
    animation: none;
  }

  .backdrop { display: none; }

  [data-color="on"] .nav-container,
  [data-color="on"] main,
  [data-color="on"] footer,
  [data-color="on"] .project-sidebar {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Backdrop: the page background moves to <html> so the canvas shows through
   <body>, and the content column sits on a frosted panel. */
[data-color="on"] {
  background-color: var(--bg-color);
}

[data-color="on"] body {
  background-color: transparent;
}

[data-color="on"] .nav-container,
[data-color="on"] main,
[data-color="on"] footer {
  background-color: var(--panel-bg);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-radius: 8px;
}

/* Blur only on the two thin strips: a blur behind the whole content column is the
   most expensive part of the frame and, at 92 % opacity, the least visible. */
[data-color="on"] .nav-container,
[data-color="on"] footer {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

[data-color="on"] main {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* The sidebar sits outside main, so it needs its own panel. */
[data-color="on"] .project-sidebar {
  background-color: var(--panel-bg);
  border-radius: 8px;
  padding: 0.6rem;
  padding-top: 1.4rem;
}

/* Constellation under color: gradient strokes and the shared hue cycle. */
[data-color="on"] .constellation stop:nth-child(1) { stop-color: var(--rainbow-stop-1); }
[data-color="on"] .constellation stop:nth-child(2) { stop-color: var(--rainbow-stop-2); }
[data-color="on"] .constellation stop:nth-child(3) { stop-color: var(--rainbow-stop-3); }
[data-color="on"] .constellation stop:nth-child(4) { stop-color: var(--rainbow-stop-4); }
[data-color="on"] .constellation stop:nth-child(5) { stop-color: var(--rainbow-stop-5); }
[data-color="on"] .constellation stop:nth-child(6) { stop-color: var(--rainbow-stop-6); }
[data-color="on"] .constellation stop:nth-child(7) { stop-color: var(--rainbow-stop-7); }

[data-color="on"] .constellation .node--tag .shape,
[data-color="on"] .constellation .link {
  stroke: url(#constellation-rainbow);
}

[data-color="on"] .constellation svg {
  animation: rainbow-cycle 12s var(--rainbow-timing) infinite;
  animation-play-state: var(--rainbow-play);
}

/* Highlight and focus, axis-free but placed after the color-on strokes above so
   that at equal specificity (0,4,0) the lit and focused node wins the gradient. */
.constellation .node.is-lit .shape {
  stroke: var(--link-color);
}

.constellation .link.is-lit {
  stroke: var(--link-color);
  stroke-width: 2;
}

/* Safari has no :focus-visible outline on SVG <a>, so the thick stroke stays as
   the fallback beside the real outline. */
.constellation .node:focus-visible .shape {
  stroke: var(--link-color);
  stroke-width: 3;
}

.constellation .node:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Style axis: pixel. Chrome and headings switch to a bitmap-style     */
/* font, corners go square, borders thicken, shadows go hard, images   */
/* render pixelated, nothing eases. Body text keeps its font. Nothing  */
/* here applies while data-style is smooth; the font only downloads    */
/* when a pixel rule references it.                                    */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Silkscreen";
  src: url("../fonts/Silkscreen-Regular.woff2") format("woff2"),
       url("../fonts/Silkscreen-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

[data-style="pixel"] {
  --pixel-font: "Silkscreen", "Courier New", monospace;
}

/* Pixel font on chrome and headings only. Silkscreen is wide and has no
   lowercase-height nuance, so sizes step down from Tale's defaults. */
[data-style="pixel"] h1,
[data-style="pixel"] h2,
[data-style="pixel"] h3,
[data-style="pixel"] h4,
[data-style="pixel"] h5,
[data-style="pixel"] h6,
[data-style="pixel"] .nav-title,
[data-style="pixel"] .nav a,
[data-style="pixel"] .catalogue-time,
[data-style="pixel"] .catalogue-pinned,
[data-style="pixel"] .post-info,
[data-style="pixel"] .tag-date,
[data-style="pixel"] .tag-chip,
[data-style="pixel"] .tag-count,
[data-style="pixel"] .project-name,
[data-style="pixel"] .project-version,
[data-style="pixel"] .share-feedback,
[data-style="pixel"] .pagination,
[data-style="pixel"] .pagination .top {
  font-family: var(--pixel-font);
  letter-spacing: 0;
  line-height: 1.3;
}

[data-style="pixel"] .post-title,
[data-style="pixel"] .tags-header-title { font-size: 2rem; }
[data-style="pixel"] .catalogue-title { font-size: 1.5rem; }
[data-style="pixel"] h1 { font-size: 1.5rem; }
[data-style="pixel"] h2,
[data-style="pixel"] h3 { font-size: 1rem; }
[data-style="pixel"] h4,
[data-style="pixel"] h5,
[data-style="pixel"] h6 { font-size: 0.75rem; }
[data-style="pixel"] .nav-title { font-size: 1rem; }
[data-style="pixel"] .nav a,
[data-style="pixel"] .catalogue-time,
[data-style="pixel"] .catalogue-pinned,
[data-style="pixel"] .post-info,
[data-style="pixel"] .tag-date,
[data-style="pixel"] .pagination,
[data-style="pixel"] .tag-chip { font-size: 0.75rem; }
[data-style="pixel"] .project-card .project-name { font-size: 0.75rem; line-height: 1.35; }
[data-style="pixel"] .tag-count,
[data-style="pixel"] .project-version,
[data-style="pixel"] .share-feedback { font-size: 0.5rem; }

[data-style="pixel"] .post-info span {
  font-style: normal;
}

[data-style="pixel"] .project-version {
  margin-left: 0;
}

/* Shapes: no rounding anywhere, thicker borders, hard shadows. */
[data-style="pixel"] .tag-chip,
[data-style="pixel"] .tag-count,
[data-style="pixel"] .project-card,
[data-style="pixel"] .project-version,
[data-style="pixel"] .share-button,
[data-style="pixel"] .share-feedback,
[data-style="pixel"] code,
[data-style="pixel"] pre,
[data-style="pixel"] .highlight,
[data-style="pixel"] .project-logo {
  border-radius: 0;
}

[data-style="pixel"] .tag-chip,
[data-style="pixel"] .project-card,
[data-style="pixel"] .catalogue-item,
[data-style="pixel"] .tag-section,
[data-style="pixel"] .pagination,
[data-style="pixel"] .pagination .top,
[data-style="pixel"] footer {
  border-width: 2px;
}

[data-style="pixel"] .share-button {
  box-shadow: 4px 4px 0 var(--heading-color);
}

[data-style="pixel"] .share-button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--heading-color);
}

[data-style="pixel"] .share-button:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* Thick lines become stepped blocks. */
[data-style="pixel"] .catalogue-line,
[data-style="pixel"] .post-line,
[data-style="pixel"] .tags-header-line {
  border-top-width: 0.5rem;
  border-top-style: dashed;
}

/* Images and icons: no smoothing. */
[data-style="pixel"] img {
  image-rendering: pixelated;
}

[data-style="pixel"] svg {
  shape-rendering: crispEdges;
}

/* Motion: nothing eases; hovers snap by a pixel or two. */
[data-style="pixel"] body,
[data-style="pixel"] .share-button,
[data-style="pixel"] .share-feedback,
[data-style="pixel"] .theme-toggle,
[data-style="pixel"] .catalogue-line,
[data-style="pixel"] .nav-title,
[data-style="pixel"] .nav li,
[data-style="pixel"] .pagination .top,
[data-style="pixel"] .pagination .arrow,
[data-style="pixel"] .tags-post-line {
  transition: none;
}

[data-style="pixel"] .theme-toggle:hover {
  transform: translate(1px, 1px);
}

[data-style="pixel"] .theme-toggle:active {
  transform: translate(2px, 2px);
}

/* Cross-axis: with color on, the hue cycle jumps instead of sliding, and
   the gradient rings match the thicker borders. */
[data-style="pixel"][data-color="on"] {
  --rainbow-timing: steps(12);
}

[data-style="pixel"][data-color="on"] .tag-chip::before,
[data-style="pixel"][data-color="on"] .project-card::before {
  padding: 2px;
}

/* The thin rainbow strips were sized for 1px borders; cover the 2px ones. */
[data-style="pixel"][data-color="on"] .catalogue-item::after,
[data-style="pixel"][data-color="on"] .tag-section::after {
  bottom: -2px;
  height: 3px;
}

[data-style="pixel"][data-color="on"] .pagination::after,
[data-style="pixel"][data-color="on"] .pagination .top::after,
[data-style="pixel"][data-color="on"] footer::after {
  top: -2px;
  height: 3px;
}

/* Shortcut dialog under the other axes. */
[data-color="on"] .shortcuts {
  position: relative;
  border-color: transparent;
  background: var(--bg-color);
}

[data-color="on"] .shortcuts::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--rainbow-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: rainbow-cycle 12s var(--rainbow-timing) infinite;
  animation-play-state: var(--rainbow-play);
}

[data-style="pixel"] .shortcuts,
[data-style="pixel"] .shortcuts kbd {
  border-radius: 0;
}

[data-style="pixel"] .shortcuts {
  border-width: 2px;
  box-shadow: 6px 6px 0 var(--heading-color);
}

[data-style="pixel"] .shortcuts-title,
[data-style="pixel"] .shortcuts-groups h3,
[data-style="pixel"] .shortcuts kbd {
  font-family: var(--pixel-font);
}

[data-style="pixel"] .shortcuts-title { font-size: 1rem; }
[data-style="pixel"] .shortcuts-groups h3 { font-size: 0.5rem; }
[data-style="pixel"] .shortcuts kbd { font-size: 0.75rem; }

[data-style="pixel"][data-color="on"] .shortcuts::before {
  padding: 2px;
}

/* Backdrop under pixel: opaque bordered panels, crisp blocks, no blur. */
[data-color="on"][data-style="pixel"] .nav-container,
[data-color="on"][data-style="pixel"] main,
[data-color="on"][data-style="pixel"] footer {
  background-color: var(--bg-color);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 2px solid var(--border-color);
  border-radius: 0;
}

[data-color="on"][data-style="pixel"] .project-sidebar {
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: 0;
}

[data-style="pixel"] .backdrop {
  image-rendering: pixelated;
}

/* Constellation under pixel: square nodes are drawn by the script; crisp lines, pixel labels, no easing. */
[data-style="pixel"] .constellation .label {
  font-family: var(--pixel-font);
  font-size: 12px;
}

[data-style="pixel"] .constellation .node,
[data-style="pixel"] .constellation .link,
[data-style="pixel"] .constellation .node--post .label {
  transition: none;
}

/* Side notes under the other axes. */
[data-color="on"] .sidenote {
  border-left-color: transparent;
  border-image: var(--rainbow) 1;
}

[data-style="pixel"] .sidenote {
  border-radius: 0;
  border-left-width: 4px;
}

[data-style="pixel"] .sidenote-number,
[data-style="pixel"] .footnote.is-active {
  font-family: var(--pixel-font);
  font-size: 0.75rem;
  border-radius: 0;
}