/* ==========================================================================
   cyber-glitch.css  -  Alan Walker-inspired "digital glitch" skin

   SCOPE
   - Additive layer. Loaded AFTER dark-felt.css (and about-tabs.css). style.css,
     dark-felt.css and about-tabs.css are not edited.
   - Every rule is scoped to  body.dark-theme, so Light mode is never touched.
     Delete the <link> to this file (and cyber-glitch.js) and the site is exactly
     as it was.
   - Content, layout and behaviour are unchanged: this file only re-colours and
     adds effects. Effects are pointer-events:none overlays or pseudo-elements.

   PALETTE
   void    #02060f   page base
   deep    #050d1f   panels
   blue    #2f6bff   electric blue
   cyan    #00f0ff   neon cyan (primary accent)
   ice     #bff8ff   highlights / headings glow
   split   #ff2a6d   used ONLY as the red channel inside brief RGB-split slices

   PERFORMANCE
   - Idle effects animate transform / opacity / clip-path on tiny or fixed layers.
   - html[data-cg="lite"]  (Battery / Reduced / Disabled mode, Save-Data) freezes
     the noise + roll layers and idle glitching; hover effects stay.
   - prefers-reduced-motion: every animation is off; colours and static scanlines stay.
   ========================================================================== */

@property --s { syntax: '<length>'; inherits: false; initial-value: 12px; }

/* ---------- 1. Tokens ---------------------------------------------------- */
body.dark-theme {
  --cg-void: #02060f;
  --cg-deep: #050d1f;
  --cg-panel: rgba(3, 10, 26, .88);
  --cg-blue: #2f6bff;
  --cg-cyan: #00f0ff;
  --cg-ice: #bff8ff;
  --cg-split: #ff2a6d;
  --cg-ink: #001018;                  /* text on solid cyan (~15:1) */
  --cg-text: #9fc4dc;                 /* body copy on void ~10:1 */
  --cg-muted: #7fa3bd;                /* ~7:1 */
  --cg-dim: #6e8fa8;                  /* ~5.6:1 */
  --cg-line: rgba(0, 240, 255, .16);
  --cg-line-strong: rgba(0, 240, 255, .34);
  --cg-glow-sm: 0 0 .6rem rgba(0, 240, 255, .35);
  --cg-glow: 0 0 .75rem rgba(0, 240, 255, .4), 0 0 2rem rgba(47, 107, 255, .3);
  --cg-split-text: -1px 0 rgba(255, 42, 109, .85), 1px 0 rgba(0, 240, 255, .9);

  /* re-point the felt tokens: everything built on them re-colours by itself */
  --felt-white: var(--cg-ice);
  --felt-bright: #cfeefa;
  --felt-text: var(--cg-text);
  --felt-muted: var(--cg-muted);
  --felt-dim: var(--cg-dim);
  --felt-ink: #030a18;
  --felt-line: var(--cg-line);
  --felt-line-strong: var(--cg-line-strong);
  --felt-card: var(--cg-panel);
  --felt-img-filter: grayscale(1) sepia(1) hue-rotate(172deg) saturate(3.2) contrast(1.08) brightness(.92);
  --felt-img-hover: grayscale(1) sepia(1) hue-rotate(172deg) saturate(4) contrast(1.15) brightness(1.12);

  --color-bg: var(--cg-void);
  --color-surface: #040b1a;
  --color-surface-raised: #07122a;
  --color-surface-muted: #091630;
  --color-surface-hover: #0b1c3d;
  --color-accent: var(--cg-cyan);
  --color-accent-2: var(--cg-blue);
  --color-link: var(--cg-ice);
  --color-link-hover: var(--cg-cyan);
  --color-focus: var(--cg-cyan);
  --color-code-bg: #030a18;
  --color-code-text: #cfeefa;
  --color-overlay: rgba(1, 5, 14, .74);
  --color-overlay-strong: rgba(1, 5, 14, .94);
  --terminal-green: var(--cg-ice);
  --terminal-red: var(--cg-cyan);

  /* title-bar dots: electric blue / cyan / ice */
  --dot-1: #2f6bff;  --dot-1-alt: #8fb4ff;
  --dot-2: #00f0ff;  --dot-2-alt: #8cf7ff;
  --dot-3: #bff8ff;  --dot-3-alt: #ffffff;
  --dot-ring: rgba(0, 240, 255, .35);

  /* 404 page (404.css) tokens */
  --bg: var(--cg-void);
  --surface: #040b1a;
  --surface-raised: #07122a;
  --text: var(--cg-text);
  --text-strong: var(--cg-ice);
  --muted: var(--cg-muted);
  --border: var(--cg-line-strong);
  --accent: var(--cg-cyan);
  --accent-ink: var(--cg-ink);
  --prompt: var(--cg-cyan);
  --err: var(--cg-split);
  --focus: var(--cg-cyan);
  --glow: rgba(0, 240, 255, .25);
  --grid: rgba(0, 240, 255, .05);

  background: var(--cg-void);
  color: var(--cg-text);
}

/* ---------- 2. Stage: grid, glows, vignette, scrollbars, selection ------- */
html[data-theme="dark"] {
  background: var(--cg-void);
  scrollbar-color: #1b4a7a var(--cg-void);
}
/* Static, fixed layer (no repaint on scroll). Replaces felt's grey spotlight. */
body.dark-theme::before {
  background:
    radial-gradient(ellipse 60% 45% at 18% 8%, rgba(47, 107, 255, .20), transparent 70%),
    radial-gradient(ellipse 55% 40% at 88% 92%, rgba(0, 240, 255, .13), transparent 70%),
    linear-gradient(rgba(0, 240, 255, .035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(0, 240, 255, .035) 1px, transparent 1px) 0 0 / 44px 44px;
  box-shadow: inset 0 0 clamp(70px, 12vw, 150px) clamp(30px, 5vw, 64px) var(--cg-void);
}
/* the existing starfield keeps its Performance Mode, but returns to neon blue */
/* no filter here: filtering an animated canvas re-runs every frame and halves the frame rate */
body.dark-theme #stars { filter: none; opacity: .9; }

body.dark-theme ::selection { background: var(--cg-cyan); color: var(--cg-ink); }
body.dark-theme ::-webkit-scrollbar { background: var(--cg-void); }
body.dark-theme ::-webkit-scrollbar-thumb { background: #1b4a7a; }
body.dark-theme ::-webkit-scrollbar-thumb:hover { background: var(--cg-cyan); }
body.dark-theme #search ul::-webkit-scrollbar { background-color: var(--cg-void); }
body.dark-theme #search ul::-webkit-scrollbar-thumb { background-color: #1b4a7a; }
body.dark-theme :focus-visible { outline: 2px solid var(--cg-cyan); outline-offset: 2px; box-shadow: var(--cg-glow-sm); }

/* ---------- 3. FX layers (created by cyber-glitch.js) -------------------- */
/* Static scanlines also exist without JS, on body::after. */
body.dark-theme::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 12, 30, .30) 3px, rgba(0, 12, 30, .30) 4px);
  opacity: .5;
}
.cg-fx, .cg-tear { position: fixed; inset: 0; pointer-events: none; z-index: 9991; overflow: hidden; contain: strict; }
body:not(.dark-theme) .cg-fx,
body:not(.dark-theme) .cg-tear,
body:not(.dark-theme) #cg-particles { display: none; }

/* digital noise: a tile bigger than the viewport, stepped (not eased) so it reads as static */
.cg-noise {
  position: absolute;
  inset: -8%;
  opacity: .075;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .85  0 0 0 0 1  0 0 0 1.4 -.35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  animation: cg-noise 1.6s steps(1, end) infinite;
}
@keyframes cg-noise {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-4%, 3%, 0); }
  50%  { transform: translate3d(3%, -5%, 0); }
  75%  { transform: translate3d(-2%, 5%, 0); }
}
/* a soft bright band that rolls down the screen, like a CRT sync drift */
.cg-roll {
  position: absolute;
  left: 0;
  right: 0;
  top: -30vh;
  height: 28vh;
  background: linear-gradient(to bottom, transparent, rgba(0, 240, 255, .045) 45%, rgba(47, 107, 255, .07) 55%, transparent);
  animation: cg-roll 11s linear infinite;
  will-change: transform;
  display: none;                      /* only in Performance Mode "high" (see below) */
}
html[data-cg-mode="high"] .cg-roll { display: block; }
@keyframes cg-roll { to { transform: translate3d(0, 160vh, 0); } }

/* glitch burst: thin tear bars (positions randomised by JS) */
.cg-tear { z-index: 9992; opacity: 0; }
html.cg-burst .cg-tear { opacity: 1; animation: cg-tear-flicker .24s steps(1, end) 1; }
.cg-tear i {
  position: absolute;
  left: -2%;
  width: 104%;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, .32) 20%, rgba(47, 107, 255, .38) 60%, rgba(255, 42, 109, .22) 85%, transparent);
  transform: translate3d(var(--tx, 0), 0, 0);
}
@keyframes cg-tear-flicker {
  0% { opacity: 1; } 25% { opacity: 0; } 40% { opacity: 1; } 70% { opacity: .5; } 100% { opacity: 0; }
}

/* floating digital particles (canvas, drawn by cyber-glitch.js) */
#cg-particles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ---------- 4. Glitch text (data-text set by cyber-glitch.js) ------------ */
body.dark-theme [data-cg-text] { position: relative; text-shadow: 0 0 .65rem rgba(0, 240, 255, .5); }
body.dark-theme [data-cg-text]::before,
body.dark-theme [data-cg-text]::after {
  content: attr(data-cg-text);
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: inherit;
  border: inherit;
  border-color: transparent;
  text-align: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  text-decoration: none;
  text-shadow: none;
  clip-path: inset(0 0 100% 0);
}
body.dark-theme [data-cg-text]::before { color: var(--cg-cyan); animation: cg-slice-a 7s steps(1, end) 1.4s infinite; }
body.dark-theme [data-cg-text]::after  { color: var(--cg-split); animation: cg-slice-b 7s steps(1, end) 1.4s infinite; }
body.dark-theme .category-header[data-cg-text]::before { animation-delay: 3.2s; }
body.dark-theme .category-header[data-cg-text]::after  { animation-delay: 3.2s; }
body.dark-theme .post-title[data-cg-text]::before { animation-delay: 2.2s; }
body.dark-theme .post-title[data-cg-text]::after  { animation-delay: 2.2s; }
body.dark-theme #loading [data-cg-text]::before { animation-duration: 1.6s; animation-delay: 0s; }
body.dark-theme #loading [data-cg-text]::after  { animation-duration: 1.6s; animation-delay: 0s; }

@keyframes cg-slice-a {
  0%, 85%, 100% { clip-path: inset(0 0 100% 0); transform: translate3d(0, 0, 0); }
  86% { clip-path: inset(10% 0 64% 0); transform: translate3d(-4px, 0, 0); }
  88% { clip-path: inset(56% 0 20% 0); transform: translate3d(3px, 0, 0); }
  90% { clip-path: inset(28% 0 46% 0); transform: translate3d(-2px, 0, 0); }
  92% { clip-path: inset(72% 0 6% 0); transform: translate3d(4px, 0, 0); }
  94% { clip-path: inset(0 0 100% 0); }
}
@keyframes cg-slice-b {
  0%, 86%, 100% { clip-path: inset(0 0 100% 0); transform: translate3d(0, 0, 0); }
  87% { clip-path: inset(48% 0 30% 0); transform: translate3d(4px, 0, 0); }
  89% { clip-path: inset(8% 0 72% 0); transform: translate3d(-3px, 0, 0); }
  91% { clip-path: inset(64% 0 12% 0); transform: translate3d(2px, 0, 0); }
  93% { clip-path: inset(20% 0 54% 0); transform: translate3d(-4px, 0, 0); }
  95% { clip-path: inset(0 0 100% 0); }
}
/* faster, denser version used on hover and during a global burst */
@keyframes cg-slice-hot-a {
  0%   { clip-path: inset(10% 0 64% 0); transform: translate3d(-4px, 0, 0); }
  20%  { clip-path: inset(60% 0 14% 0); transform: translate3d(3px, 0, 0); }
  40%  { clip-path: inset(30% 0 44% 0); transform: translate3d(-3px, 0, 0); }
  60%  { clip-path: inset(76% 0 4% 0); transform: translate3d(4px, 0, 0); }
  80%  { clip-path: inset(2% 0 82% 0); transform: translate3d(-2px, 0, 0); }
  100% { clip-path: inset(44% 0 36% 0); transform: translate3d(2px, 0, 0); }
}
@keyframes cg-slice-hot-b {
  0%   { clip-path: inset(52% 0 26% 0); transform: translate3d(4px, 0, 0); }
  25%  { clip-path: inset(6% 0 76% 0); transform: translate3d(-4px, 0, 0); }
  50%  { clip-path: inset(68% 0 10% 0); transform: translate3d(3px, 0, 0); }
  75%  { clip-path: inset(22% 0 52% 0); transform: translate3d(-3px, 0, 0); }
  100% { clip-path: inset(84% 0 0 0); transform: translate3d(2px, 0, 0); }
}
html.cg-burst body.dark-theme [data-cg-text]::before { animation: cg-slice-hot-a .24s steps(1, end) 1; }
html.cg-burst body.dark-theme [data-cg-text]::after  { animation: cg-slice-hot-b .24s steps(1, end) 1; }
@media (hover: hover) and (pointer: fine) {
  body.dark-theme .site-name:hover [data-cg-text]::before,
  body.dark-theme [data-cg-text]:hover::before { animation: cg-slice-hot-a .5s steps(1, end) infinite; }
  body.dark-theme .site-name:hover [data-cg-text]::after,
  body.dark-theme [data-cg-text]:hover::after  { animation: cg-slice-hot-b .5s steps(1, end) infinite; }
}

/* RGB split on the whole page for the length of a burst (text only: no filters) */
html.cg-burst body.dark-theme #post .inner-content { animation: cg-jolt .24s steps(1, end) 1; text-shadow: var(--cg-split-text); }
@keyframes cg-jolt {
  0% { transform: translate3d(-3px, 0, 0); } 25% { transform: translate3d(3px, 0, 0); }
  50% { transform: translate3d(-1px, 0, 0); } 75% { transform: translate3d(2px, 0, 0); } 100% { transform: none; }
}

/* ---------- 5. Brand, headings, typography ------------------------------- */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6,
body.dark-theme strong,
body.dark-theme b,
body.dark-theme #post main strong { color: var(--cg-ice); }
body.dark-theme .side-banner .site-name mark { color: var(--cg-ice); }
body.dark-theme .site-logo { box-shadow: 0 0 0 1px var(--cg-line-strong), 0 0 .9rem rgba(0, 240, 255, .35); }
body.dark-theme .category-header {
  color: var(--cg-ice);
  border-bottom-color: var(--cg-line-strong);
  text-decoration-color: var(--cg-cyan);
}
body.dark-theme .post-title { color: var(--cg-ice); }
body.dark-theme .category-tree a { color: var(--cg-muted); }
body.dark-theme .category-tree a:hover { color: var(--cg-cyan); text-shadow: var(--cg-split-text); }

/* ---------- 6. Page load: one orchestrated glitch-in --------------------- */
body.dark-theme #post { animation: cg-fade .5s ease both; }
body.dark-theme #post .inner-content { animation: cg-boot .72s steps(1, end) both; }
body.dark-theme .paginated-item { animation: cg-item-in .6s steps(1, end) both; }
body.dark-theme .paginated-item:nth-child(2) { animation-delay: .05s; }
body.dark-theme .paginated-item:nth-child(3) { animation-delay: .10s; }
body.dark-theme .paginated-item:nth-child(4) { animation-delay: .15s; }
body.dark-theme .paginated-item:nth-child(5) { animation-delay: .20s; }
@keyframes cg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-boot {
  0%   { clip-path: inset(0 0 96% 0); transform: translate3d(-8px, 0, 0); opacity: .5; }
  14%  { clip-path: inset(0 0 60% 0); transform: translate3d(6px, 0, 0); opacity: 1; }
  28%  { clip-path: inset(20% 0 30% 0); transform: translate3d(-4px, 0, 0); }
  42%  { clip-path: inset(0 0 12% 0); transform: translate3d(3px, 0, 0); }
  56%  { clip-path: inset(0); transform: translate3d(-2px, 0, 0); }
  70%  { clip-path: inset(0 0 40% 0); transform: translate3d(2px, 0, 0); }
  84%  { clip-path: inset(0); transform: translate3d(-1px, 0, 0); }
  100% { clip-path: inset(0); transform: none; opacity: 1; }
}
@keyframes cg-item-in {
  0%   { opacity: 0; transform: translate3d(-10px, 0, 0); clip-path: inset(0 0 85% 0); }
  25%  { opacity: 1; transform: translate3d(6px, 0, 0); clip-path: inset(40% 0 20% 0); }
  50%  { transform: translate3d(-4px, 0, 0); clip-path: inset(0 0 30% 0); }
  75%  { transform: translate3d(2px, 0, 0); clip-path: inset(0); }
  100% { opacity: 1; transform: none; clip-path: inset(0); }
}

/* leaving a page: a short glitch-out (class set by cyber-glitch.js, then it navigates) */
html.cg-leaving body.dark-theme #post .inner-content { animation: cg-out .22s steps(1, end) forwards; }
html.cg-leaving .cg-tear { opacity: 1; }
@keyframes cg-out {
  0%   { transform: translate3d(0, 0, 0); clip-path: inset(0); }
  30%  { transform: translate3d(8px, 0, 0); clip-path: inset(10% 0 40% 0); }
  60%  { transform: translate3d(-10px, 0, 0); clip-path: inset(50% 0 10% 0); }
  100% { transform: translate3d(4px, 0, 0); clip-path: inset(0 0 100% 0); opacity: 0; }
}

/* loader */
body.dark-theme #loading { background: var(--cg-void); }
body.dark-theme #loading .loading_box p { color: var(--cg-cyan); }

/* ---------- 7. Navigation ------------------------------------------------- */
body.dark-theme #navigation {
  --nav-fg: var(--cg-muted);
  --nav-fg-muted: var(--cg-muted);
  --nav-bg-hover: rgba(0, 240, 255, .09);
  --nav-fg-hover: var(--cg-cyan);
  --nav-bg-current: rgba(47, 107, 255, .16);
  --nav-fg-current: var(--cg-ice);
  --nav-indicator: var(--cg-cyan);
}
body.dark-theme .nav-list-link { position: relative; overflow: hidden; }
body.dark-theme .nav-list-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cg-cyan), var(--cg-blue) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
  pointer-events: none;
}
body.dark-theme .nav-tree-node.is-current > .nav-item > .nav-list-link {
  background: rgba(47, 107, 255, .16);
  box-shadow: inset 2px 0 0 var(--cg-cyan), 0 0 1rem rgba(0, 240, 255, .12);
  color: var(--cg-ice);
}
body.dark-theme .nav-tree-node.is-current > .nav-item > .nav-list-link::after { transform: scaleX(1); opacity: .55; }
body.dark-theme .nav-tree-node.is-current > .nav-item > .nav-list-link::before { background: var(--cg-cyan); box-shadow: 0 0 .5rem var(--cg-cyan); }
body.dark-theme .nav-tree-children::before { background: var(--cg-line-strong); }

@media (hover: hover) and (pointer: fine) {
  body.dark-theme #navigation .nav-list-link:hover,
  body.dark-theme #navigation .nav-list-expander:hover {
    background: rgba(0, 240, 255, .09);
    color: var(--cg-cyan);
    box-shadow: inset 2px 0 0 var(--cg-cyan), 0 0 1.1rem rgba(0, 240, 255, .18);
  }
  body.dark-theme #navigation .nav-list-link:hover .nav-tree-label {
    color: var(--cg-cyan);
    text-shadow: var(--cg-split-text);
    animation: cg-nudge .45s steps(1, end) 1;
  }
  body.dark-theme #navigation .nav-list-link:hover::after { transform: scaleX(1); }
}
body.dark-theme #navigation .nav-list-link:active,
body.dark-theme #navigation .nav-list-expander:active,
body.dark-theme #navigation .nav-list-link:focus-visible,
body.dark-theme #navigation .nav-list-expander:focus-visible {
  background: var(--cg-cyan);
  color: var(--cg-ink);
}
body.dark-theme #navigation .nav-list-link:active .nav-tree-label,
body.dark-theme #navigation .nav-list-link:focus-visible .nav-tree-label { color: var(--cg-ink); text-shadow: none; }
@keyframes cg-nudge {
  0% { transform: translate3d(-3px, 0, 0); } 25% { transform: translate3d(3px, 0, 0); }
  50% { transform: translate3d(-2px, 0, 0); } 75% { transform: translate3d(1px, 0, 0); } 100% { transform: none; }
}

/* contact icons, mobile header button, floating controls */
body.dark-theme #contact hr { background: var(--cg-line); border-color: var(--cg-line); }
body.dark-theme #contact .contact-list li a {
  color: var(--cg-muted);
  border-color: var(--cg-line-strong);
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
body.dark-theme #contact .contact-list li a:hover,
body.dark-theme #contact .contact-list li a:focus-visible {
  background: rgba(0, 240, 255, .1);
  color: var(--cg-cyan);
  border-color: var(--cg-cyan);
  box-shadow: var(--cg-glow-sm), inset 0 0 .6rem rgba(0, 240, 255, .15);
}
body.dark-theme #contact .contact-list li a:hover i { text-shadow: var(--cg-split-text); }
body.dark-theme #contact > span a:hover { color: var(--cg-cyan); }

body.dark-theme #btn-nav { border-color: var(--cg-line-strong); color: var(--cg-cyan); }
body.dark-theme #btn-nav:hover,
body.dark-theme #btn-nav:active,
body.dark-theme #btn-nav[aria-expanded="true"] { background: var(--cg-cyan); color: var(--cg-ink); box-shadow: var(--cg-glow-sm); }
body.dark-theme .sidebar-drawer { background: var(--cg-void); border-right-color: var(--cg-line-strong); box-shadow: 8px 0 30px rgba(0, 120, 255, .12); }
body.dark-theme .side-banner { border-bottom-color: var(--cg-line-strong); box-shadow: 0 1px 0 rgba(0, 240, 255, .08), 0 8px 24px rgba(0, 90, 255, .08); }
body.dark-theme .sidebar-backdrop { background: rgba(1, 5, 14, .7); }

body.dark-theme .site-actions { background: rgba(2, 6, 15, .9); border-color: var(--cg-line-strong); box-shadow: 0 0 1.2rem rgba(0, 120, 255, .15); }
body.dark-theme .site-action { color: var(--cg-cyan); border-color: var(--cg-line-strong); transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
body.dark-theme .site-action:active { background: var(--cg-cyan); color: var(--cg-ink); }
@media (hover: hover) and (pointer: fine) {
  body.dark-theme .site-action:hover { background: rgba(0, 240, 255, .12); color: var(--cg-cyan); box-shadow: var(--cg-glow-sm), inset 0 0 .6rem rgba(0, 240, 255, .2); }
  body.dark-theme .site-action:hover .site-action-icon { text-shadow: var(--cg-split-text); }
}
body.dark-theme .top-arrow { background: var(--cg-void); color: var(--cg-cyan); border-color: var(--cg-line-strong); box-shadow: var(--cg-glow-sm); }
body.dark-theme .top-arrow:hover,
body.dark-theme .top-arrow:focus-visible { background: var(--cg-cyan); color: var(--cg-ink); border-color: var(--cg-cyan); box-shadow: var(--cg-glow); }

body.dark-theme .site-avatar img { outline-color: var(--cg-line-strong); }
body.dark-theme .site-avatar img:hover,
body.dark-theme .site-avatar img:focus-visible { outline-color: var(--cg-cyan); box-shadow: var(--cg-glow); }

/* ---------- 8. Content card, breadcrumb ---------------------------------- */
body.dark-theme #post .inner-content {
  background: var(--cg-panel);
  border-color: var(--cg-line-strong);
  box-shadow: 0 0 0 1px rgba(0, 240, 255, .05), 0 0 2.2rem rgba(47, 107, 255, .14), inset 0 0 3rem rgba(0, 110, 255, .05);
}
body.dark-theme #post .inner-header {
  background: #030a18;
  border-bottom-color: var(--cg-line-strong);
  box-shadow: inset 0 -1px 0 rgba(0, 240, 255, .12);
}

/* ---------- 9. Project cards --------------------------------------------- */
body.dark-theme .article_content {
  position: relative;
  border-bottom-color: var(--cg-line);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* corner brackets: dim at rest, bright and wider on hover / keyboard focus */
body.dark-theme .article_content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  --b: var(--cg-line-strong);
  --s: 12px;
  background:
    linear-gradient(var(--b), var(--b)) top left / var(--s) 1px no-repeat,
    linear-gradient(var(--b), var(--b)) top left / 1px var(--s) no-repeat,
    linear-gradient(var(--b), var(--b)) top right / var(--s) 1px no-repeat,
    linear-gradient(var(--b), var(--b)) top right / 1px var(--s) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / var(--s) 1px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / 1px var(--s) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / var(--s) 1px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / 1px var(--s) no-repeat;
  transition: --s .2s ease;
}
/* one scan sweep across the card when it is entered */
body.dark-theme .article_content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cg-cyan), transparent);
  box-shadow: 0 0 .8rem var(--cg-cyan);
  opacity: 0;
}
body.dark-theme .article_content .box_contents { border-color: var(--cg-line-strong); background: var(--cg-panel); }
body.dark-theme .article_content .title_post { color: var(--cg-ice); }
body.dark-theme .article_content .title_post:hover { color: var(--cg-cyan); text-decoration: none; text-shadow: var(--cg-split-text); }
body.dark-theme .article_content .txt_post { color: var(--cg-muted); }
body.dark-theme .article_content .category { color: var(--cg-cyan) !important; }
body.dark-theme .article_content .category:hover { color: var(--cg-ice) !important; text-shadow: var(--cg-split-text); }
body.dark-theme .article_content .date { color: var(--cg-dim); }

@media (hover: hover) and (pointer: fine) {
  body.dark-theme .article_content:hover,
  body.dark-theme .article_content:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px var(--cg-line-strong), 0 0 1.4rem rgba(0, 240, 255, .22), 0 .8rem 2rem rgba(0, 60, 255, .18);
  }
  body.dark-theme .article_content:hover .box_contents,
  body.dark-theme .article_content:focus-within .box_contents { border-color: var(--cg-cyan); }
  body.dark-theme .article_content:hover::after,
  body.dark-theme .article_content:focus-within::after { animation: cg-sweep .7s ease-out 1; }
  body.dark-theme .article_content:hover .title_post { animation: cg-title-jit .5s steps(1, end) 1; }
}
body.dark-theme .article_content:hover::before,
body.dark-theme .article_content:focus-within::before,
body.dark-theme .article_content:active::before { --b: var(--cg-cyan); --s: 22px; }
body.dark-theme .article_content:active::after { animation: cg-sweep .5s ease-out 1; }
@keyframes cg-sweep {
  0%   { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(0, 260px, 0); }
}
@keyframes cg-title-jit {
  0% { text-shadow: -2px 0 rgba(255, 42, 109, .9), 2px 0 rgba(0, 240, 255, .9); transform: translate3d(-2px, 0, 0); }
  25% { text-shadow: 2px 0 rgba(255, 42, 109, .9), -2px 0 rgba(0, 240, 255, .9); transform: translate3d(2px, 0, 0); }
  50% { text-shadow: -1px 0 rgba(255, 42, 109, .8), 1px 0 rgba(0, 240, 255, .8); transform: translate3d(-1px, 0, 0); }
  100% { text-shadow: var(--cg-split-text); transform: none; }
}
/* list view keeps its flat rows: only the neon tint, no lift */
html[data-post-view="list"] body.dark-theme #category-list.posts-view .article_content:hover { background: rgba(0, 240, 255, .05); transform: none; }

/* ---------- 10. Holographic thumbnails ------------------------------------ */
/* JS sets --cg-img and .cg-ready on first pointer/focus contact (keeps images lazy). */
body.dark-theme .article_content .thumbnail_post { position: relative; isolation: isolate; box-shadow: inset 0 0 0 1px var(--cg-line-strong); }
body.dark-theme .article_content .thumbnail_post img { transition: filter .25s ease, transform .35s ease; }
/* R and C channels: the image multiplied by one colour, screen-blended over the base,
   then pulled apart in opposite directions = RGB split */
body.dark-theme .article_content .thumbnail_post::before,
body.dark-theme .article_content .thumbnail_post::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background-image: var(--cg-img, none);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  mix-blend-mode: screen;
  transition: opacity .15s ease;
}
body.dark-theme .article_content .thumbnail_post::before { background-color: #00f0ff; }
body.dark-theme .article_content .thumbnail_post::after  { background-color: #ff2a6d; }
/* holo foil + scanlines live on the zone (outside the overflow-hidden anchor) */
body.dark-theme .article_content .thumbnail_zone { position: relative; }
body.dark-theme .article_content .thumbnail_zone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0, 240, 255, .10) 3px, transparent 4px),
    linear-gradient(115deg, transparent 20%, rgba(0, 240, 255, .28) 38%, rgba(143, 180, 255, .30) 50%, rgba(191, 248, 255, .26) 58%, transparent 76%) 0 0 / 260% 100% no-repeat;
  background-position: 0 0, 130% 0;
  opacity: .55;
  transition: opacity .25s ease;
}
body.dark-theme .article_content .thumbnail_post.cg-ready:hover::before,
body.dark-theme .article_content .thumbnail_post.cg-ready:focus-visible::before { opacity: .6; animation: cg-split-l .6s steps(1, end) infinite; }
body.dark-theme .article_content .thumbnail_post.cg-ready:hover::after,
body.dark-theme .article_content .thumbnail_post.cg-ready:focus-visible::after { opacity: .5; animation: cg-split-r .6s steps(1, end) infinite; }
body.dark-theme .article_content .thumbnail_post.cg-ready:active::before { opacity: .85; transform: translate3d(-4px, 0, 0); }
body.dark-theme .article_content .thumbnail_post.cg-ready:active::after { opacity: .75; transform: translate3d(4px, 0, 0); }
@keyframes cg-split-l {
  0% { transform: translate3d(-3px, 0, 0); } 30% { transform: translate3d(-5px, 1px, 0); }
  55% { transform: translate3d(-2px, -1px, 0); } 80% { transform: translate3d(-6px, 0, 0); } 100% { transform: translate3d(-3px, 0, 0); }
}
@keyframes cg-split-r {
  0% { transform: translate3d(3px, 0, 0); } 30% { transform: translate3d(5px, -1px, 0); }
  55% { transform: translate3d(2px, 1px, 0); } 80% { transform: translate3d(6px, 0, 0); } 100% { transform: translate3d(3px, 0, 0); }
}
@media (hover: hover) and (pointer: fine) {
  body.dark-theme .article_content:hover .thumbnail_zone::after { opacity: 1; animation: cg-foil 1.1s ease-out 1 forwards; }
  body.dark-theme .article_content:hover .thumbnail_post img { transform: scale(1.04); }
}
@keyframes cg-foil { from { background-position: 0 0, 130% 0; } to { background-position: 0 0, -30% 0; } }

/* ---------- 11. Grid/List toggle, pagination ------------------------------ */
body.dark-theme .view-toggle-btn { border-color: var(--cg-line-strong); }
body.dark-theme .view-toggle-btn[aria-pressed="true"] { background: var(--cg-cyan); color: var(--cg-ink); box-shadow: var(--cg-glow-sm); }
body.dark-theme .view-toggle-btn[aria-pressed="true"] svg { color: var(--cg-ink); }
body.dark-theme .view-toggle-btn:not([aria-pressed="true"]):hover { color: var(--cg-cyan); box-shadow: var(--cg-glow-sm); }
html:not([data-post-view="list"]) body.dark-theme .view-toggle-btn[data-view="list"]:hover,
html[data-post-view="list"] body.dark-theme .view-toggle-btn[data-view="grid"]:hover { color: var(--cg-cyan); }

body.dark-theme .pagination-container .pagination-number,
body.dark-theme .pagination-container .pagination-button {
  color: var(--cg-muted);
  box-shadow: inset 0 0 0 1px var(--cg-line-strong);
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
body.dark-theme .pagination-container .pagination-number:not(.active):hover,
body.dark-theme .pagination-container .pagination-button:not(:disabled):not(.disabled):hover {
  background: rgba(0, 240, 255, .1);
  color: var(--cg-cyan);
  box-shadow: inset 0 0 0 1px var(--cg-cyan), var(--cg-glow-sm);
  text-shadow: var(--cg-split-text);
}
body.dark-theme .pagination-container .pagination-number.active,
body.dark-theme .pagination-container .pagination-number.active:hover {
  background: var(--cg-cyan);
  color: var(--cg-ink);
  box-shadow: inset 0 0 0 1px var(--cg-cyan), var(--cg-glow-sm);
  text-shadow: none;
}
body.dark-theme .pagination-container .pagination-button:disabled,
body.dark-theme .pagination-container .pagination-button.disabled { color: var(--cg-dim); box-shadow: inset 0 0 0 1px var(--cg-line); }

/* ---------- 12. Post pages ------------------------------------------------ */
body.dark-theme .post-header .thumbnail { box-shadow: 0 0 0 1px var(--cg-line-strong), 0 0 1.6rem rgba(0, 240, 255, .18); }
body.dark-theme .info-box { border-color: var(--cg-line-strong); }
body.dark-theme .info-box *,
body.dark-theme .info-box svg { color: var(--cg-text); fill: var(--cg-text); }
@media (hover: hover) and (pointer: fine) {
  body.dark-theme a.info-box:hover { background: rgba(0, 240, 255, .1); border-color: var(--cg-cyan); box-shadow: var(--cg-glow-sm); }
  body.dark-theme a.info-box:hover *,
  body.dark-theme a.info-box:hover svg { color: var(--cg-cyan); fill: var(--cg-cyan); }
  body.dark-theme .tag:hover { background: var(--cg-cyan); color: var(--cg-ink) !important; }
  body.dark-theme .tag:hover::before { border-right-color: var(--cg-cyan); }
}
body.dark-theme .tag { background: #0b1c3d; color: var(--cg-ice) !important; }
body.dark-theme .tag::before { border-right-color: #0b1c3d; }
body.dark-theme .tag::after { background: var(--cg-void); }

body.dark-theme #post main h1,
body.dark-theme #post main h2,
body.dark-theme #post main h3,
body.dark-theme #post main h4,
body.dark-theme #post main h5,
body.dark-theme #post main h6 { color: var(--cg-ice); }
body.dark-theme #post main p,
body.dark-theme #post main li { color: var(--cg-text); }
body.dark-theme #post main a { color: var(--cg-cyan); text-decoration-color: rgba(0, 240, 255, .5); }
body.dark-theme #post main a:hover { background: rgba(0, 240, 255, .14); color: var(--cg-ice); text-decoration-color: transparent; text-shadow: var(--cg-split-text); }
body.dark-theme #post main a:has(> img):hover { background: transparent; text-shadow: none; }
body.dark-theme #post main hr { background: var(--cg-line-strong); }
body.dark-theme #post main blockquote { background: #030a18; border-left: 2px solid var(--cg-cyan); box-shadow: -8px 0 18px -10px rgba(0, 240, 255, .5); }
body.dark-theme #post main code,
body.dark-theme #post main .highlighter-rouge .highlight { background: #030a18; border-color: var(--cg-line-strong); color: #cfeefa; }
body.dark-theme #post main pre code,
body.dark-theme pre code.hljs { background: #030a18; color: #cfeefa; }
body.dark-theme #post main thead th { background: #030a18; color: var(--cg-ice); }
body.dark-theme #post main th,
body.dark-theme #post main td { border-color: var(--cg-line-strong); color: var(--cg-text); }
@media (hover: hover) and (pointer: fine) {
  body.dark-theme #post main tbody tr:hover { background: rgba(0, 240, 255, .06); }
}
body.dark-theme #post main .jc-table-scroll { border-color: var(--cg-line-strong); scrollbar-color: #1b4a7a transparent; }
body.dark-theme #post main .jc-table-scroll::-webkit-scrollbar-thumb { background: #1b4a7a; }

/* code: neon syntax palette */
body.dark-theme .hljs-keyword,
body.dark-theme .hljs-selector-tag,
body.dark-theme .hljs-doctag,
body.dark-theme .hljs-formula { color: var(--cg-cyan); }
body.dark-theme .hljs-title,
body.dark-theme .hljs-built_in,
body.dark-theme .hljs-name,
body.dark-theme .hljs-section { color: var(--cg-ice); }
body.dark-theme .hljs-string,
body.dark-theme .hljs-regexp,
body.dark-theme .hljs-addition,
body.dark-theme .hljs-meta .hljs-string { color: #8cf7c8; }
body.dark-theme .hljs-number,
body.dark-theme .hljs-attr,
body.dark-theme .hljs-attribute,
body.dark-theme .hljs-literal,
body.dark-theme .hljs-type,
body.dark-theme .hljs-variable,
body.dark-theme .hljs-template-variable,
body.dark-theme .hljs-selector-class,
body.dark-theme .hljs-selector-id,
body.dark-theme .hljs-selector-attr,
body.dark-theme .hljs-selector-pseudo,
body.dark-theme .hljs-symbol,
body.dark-theme .hljs-bullet,
body.dark-theme .hljs-link,
body.dark-theme .hljs-meta { color: #8fb4ff; }
body.dark-theme .hljs-comment,
body.dark-theme .hljs-quote,
body.dark-theme .hljs-deletion { color: #6b8aa3; }

/* article images: holographic duotone, full colour in the zoom viewer */
@media (hover: hover) and (pointer: fine) {
  body.dark-theme #post main a:hover img,
  body.dark-theme #post main img.image-viewable:hover { box-shadow: -3px 0 0 rgba(255, 42, 109, .55), 3px 0 0 rgba(0, 240, 255, .6), 0 0 1.4rem rgba(0, 240, 255, .3); }
}
body.dark-theme #related-box span { color: var(--cg-ice); }
body.dark-theme #related-posts li:hover { box-shadow: 0 0 1rem rgba(0, 240, 255, .22); }
body.dark-theme #related-posts .title { color: var(--cg-ice); }
body.dark-theme #related-posts li:hover .title { color: var(--cg-cyan); text-shadow: var(--cg-split-text); }
body.dark-theme #related-posts .category { color: var(--cg-muted); }

body.dark-theme .toc-header { color: var(--cg-ice); border-bottom-color: var(--cg-line-strong); }
body.dark-theme .toc-board li a { color: var(--cg-muted); }
body.dark-theme .toc-board li a:hover { color: var(--cg-cyan); text-shadow: var(--cg-split-text); }
body.dark-theme .toc-board .is-active-link,
body.dark-theme .toc-list .is-active-link { color: var(--cg-cyan) !important; text-shadow: 0 0 .6rem rgba(0, 240, 255, .5); }

/* ---------- 13. About page ------------------------------------------------ */
body.dark-theme .about-tabs { --about-tab-ink: var(--cg-ink); }
body.dark-theme .about-tablist { border-color: var(--cg-line-strong); background: #030a18; }
@media (hover: hover) and (pointer: fine) {
  body.dark-theme .about-tab:not([aria-selected="true"]):hover { color: var(--cg-cyan); text-shadow: var(--cg-split-text); box-shadow: inset 0 0 0 1px var(--cg-line-strong), var(--cg-glow-sm); }
}
body.dark-theme .about-tab[aria-selected="true"] { background: var(--cg-cyan); color: var(--cg-ink); box-shadow: inset 0 0 0 1px var(--cg-cyan), var(--cg-glow-sm); }
body.dark-theme #about-panel-resume a.resume-download:active { background: var(--cg-ice) !important; color: var(--cg-ink) !important; }
body.dark-theme #about-panel-resume a.resume-download {
  color: var(--cg-ink) !important;
  background: var(--cg-cyan) !important;
  box-shadow: var(--cg-glow-sm);
}
@media (hover: hover) {
  body.dark-theme #about-panel-resume a.resume-download:hover {
    color: var(--cg-cyan) !important;
    background: rgba(0, 240, 255, .1) !important;
    box-shadow: inset 0 0 0 1px var(--cg-cyan), var(--cg-glow);
    text-shadow: var(--cg-split-text);
  }
}

/* ---------- 14. Search overlay -------------------------------------------- */
body.dark-theme #search { background: var(--color-overlay-strong); }
body.dark-theme .wave { background: rgba(0, 150, 255, .06); filter: none; opacity: .8; }
body.dark-theme .search-box mark { color: var(--cg-cyan) !important; text-shadow: var(--cg-split-text); }
body.dark-theme .input-box:before { background: var(--cg-void); }
body.dark-theme #search input {
  background: var(--cg-void);
  color: var(--cg-ice);
  -webkit-text-fill-color: var(--cg-ice);
  border-color: var(--cg-line-strong);
  caret-color: var(--cg-cyan);
}
body.dark-theme #search input::placeholder { color: var(--cg-dim); -webkit-text-fill-color: var(--cg-dim); }
body.dark-theme #search input:focus { border-color: var(--cg-cyan); box-shadow: var(--cg-glow); }
body.dark-theme #btn-clear { border-color: var(--cg-line-strong); color: var(--cg-cyan); }
body.dark-theme #btn-clear:hover { background: rgba(0, 240, 255, .14) !important; color: var(--cg-ice); box-shadow: var(--cg-glow-sm); }
body.dark-theme #search ul { border-bottom-color: var(--cg-line-strong); }
body.dark-theme .result-item { background: var(--cg-void); border-color: var(--cg-line); }
body.dark-theme .result-item .highlight { color: var(--cg-cyan) !important; }
@media (hover: hover) and (pointer: fine) {
  body.dark-theme .result-item:hover { background: rgba(0, 240, 255, .09); border-color: var(--cg-cyan); box-shadow: var(--cg-glow-sm); }
  body.dark-theme .result-item:hover,
  body.dark-theme .result-item:hover * { color: var(--cg-cyan) !important; }
  body.dark-theme .result-item:hover table svg { background-color: var(--cg-cyan) !important; }
}

/* ---------- 15. Image viewer, SweetAlert2 --------------------------------- */
body.dark-theme .image-viewer { background: rgba(1, 5, 14, .94); }
body.dark-theme .image-viewer-close { background: var(--cg-void); border-color: var(--cg-line-strong); color: var(--cg-cyan); }
body.dark-theme .image-viewer-close:hover,
body.dark-theme .image-viewer-close:focus-visible { background: var(--cg-cyan); color: var(--cg-ink); border-color: var(--cg-cyan); box-shadow: var(--cg-glow); }

body.dark-theme .swal2-container,
body.dark-theme .swal2-container.swal2-backdrop-show { background: rgba(1, 5, 14, .72); }
body.dark-theme .swal2-popup {
  background: var(--cg-panel);
  border-color: var(--cg-line-strong);
  box-shadow: 0 0 0 1px rgba(0, 240, 255, .06), 0 0 2.4rem rgba(47, 107, 255, .3);
}
body.dark-theme .swal2-title { color: var(--cg-ice); text-shadow: var(--cg-split-text); }
body.dark-theme .swal2-html-container { color: var(--cg-text); }
body.dark-theme .swal2-styled.swal2-confirm { background: var(--cg-cyan); color: var(--cg-ink); border-color: var(--cg-cyan); box-shadow: var(--cg-glow-sm); }
body.dark-theme .swal2-styled.swal2-cancel,
body.dark-theme .swal2-styled.swal2-deny { color: var(--cg-muted); border-color: var(--cg-line-strong); }
body.dark-theme .swal2-styled:hover { background: var(--cg-ice); color: var(--cg-ink); }
body.dark-theme .swal2-styled.swal2-cancel:hover,
body.dark-theme .swal2-styled.swal2-deny:hover { background: rgba(0, 240, 255, .12); color: var(--cg-cyan); }
body.dark-theme .swal2-styled:focus { box-shadow: 0 0 0 2px var(--cg-cyan); }

/* ---------- 16. 404 page --------------------------------------------------- */
body.dark-theme .term { background: var(--cg-panel); border-color: var(--cg-line-strong); box-shadow: 0 0 2.4rem rgba(47, 107, 255, .22); }
body.dark-theme .term-bar { background: #030a18; }
body.dark-theme .dots i { border-color: var(--cg-cyan); }
body.dark-theme .nf-code::before { color: var(--cg-cyan); }
body.dark-theme .nf-code::after { color: var(--cg-split); }
body.dark-theme .btn { border-color: var(--cg-cyan); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
body.dark-theme .btn-primary { background: var(--cg-cyan); color: var(--cg-ink); box-shadow: var(--cg-glow-sm); }
body.dark-theme .btn-primary:hover { background: var(--cg-ice); box-shadow: var(--cg-glow); }
body.dark-theme .btn-secondary:hover { background: rgba(0, 240, 255, .12); color: var(--cg-cyan); box-shadow: var(--cg-glow-sm); text-shadow: var(--cg-split-text); }
body.dark-theme .hint a { color: var(--cg-cyan); }
body.dark-theme .not-found-msg h1 { color: var(--cg-ice); }

/* ---------- 17. Mobile: lighter layers, nothing sticky-hover -------------- */
@media (max-width: 768px) {
  body.dark-theme::after { opacity: .4; }
  .cg-noise { opacity: .06; }
  html[data-cg-mode] .cg-roll { display: none; }
  body.dark-theme::before {
    background:
      radial-gradient(ellipse 80% 40% at 20% 6%, rgba(47, 107, 255, .20), transparent 70%),
      radial-gradient(ellipse 80% 40% at 85% 96%, rgba(0, 240, 255, .12), transparent 70%),
      linear-gradient(rgba(0, 240, 255, .03) 1px, transparent 1px) 0 0 / 36px 36px,
      linear-gradient(90deg, rgba(0, 240, 255, .03) 1px, transparent 1px) 0 0 / 36px 36px;
  }
  body.dark-theme .article_content .thumbnail_zone::after { opacity: .4; }
}
@media (max-width: 480px) {
  body.dark-theme [data-cg-text]::before,
  body.dark-theme [data-cg-text]::after { text-shadow: none; }
}

/* ---------- 18. Lite mode (Battery / Reduced / Disabled, Save-Data) -------- */
html[data-cg="lite"] .cg-noise,
html[data-cg="lite"] .cg-roll { animation: none; }
html[data-cg="lite"] .cg-roll,
html[data-cg-mode="high"][data-cg="lite"] .cg-roll { display: none; }
html[data-cg="lite"] body.dark-theme [data-cg-text]::before,
html[data-cg="lite"] body.dark-theme [data-cg-text]::after { animation: none; }
html[data-cg="lite"] body.dark-theme .paginated-item,
html[data-cg="lite"] body.dark-theme #post .inner-content { animation-duration: .01s; }
html[data-cg="lite"] #cg-particles { display: none; }

/* ---------- 19. Reduced motion: colour and static scanlines only ----------- */
@media (prefers-reduced-motion: reduce) {
  .cg-noise, .cg-roll, .cg-tear { animation: none !important; }
  .cg-roll, .cg-tear { display: none; }
  #cg-particles { display: none; }
  body.dark-theme [data-cg-text]::before,
  body.dark-theme [data-cg-text]::after { animation: none !important; }
  body.dark-theme #post,
  body.dark-theme #post .inner-content,
  body.dark-theme .paginated-item { animation: none; clip-path: none; }
  body.dark-theme .article_content,
  body.dark-theme .article_content:hover,
  body.dark-theme .article_content:focus-within { transform: none; }
  body.dark-theme .article_content:hover::after,
  body.dark-theme .article_content:focus-within::after,
  body.dark-theme .article_content:hover .title_post,
  body.dark-theme .article_content:hover .thumbnail_zone::after,
  body.dark-theme #navigation .nav-list-link:hover .nav-tree-label,
  body.dark-theme .article_content .thumbnail_post.cg-ready:hover::before,
  body.dark-theme .article_content .thumbnail_post.cg-ready:hover::after { animation: none; }
  body.dark-theme .article_content .thumbnail_post img { transition: none; }
}
html[data-motion="off"] .cg-noise,
html[data-motion="off"] .cg-roll { animation: none; }
html[data-motion="off"] #cg-particles { display: none; }

/* ---------- 20. highlight.js "pre-dark" theme (uses !important) ---------- */
body.dark-theme pre.pre-dark code.hljs,
body.dark-theme pre.pre-dark .hljs { background: #030a18 !important; color: #cfeefa !important; box-shadow: inset 0 0 0 1px var(--cg-line-strong); }
body.dark-theme pre.pre-dark .hljs-keyword,
body.dark-theme pre.pre-dark .hljs-selector-tag,
body.dark-theme pre.pre-dark .hljs-doctag,
body.dark-theme pre.pre-dark .hljs-formula { color: var(--cg-cyan) !important; }
body.dark-theme pre.pre-dark .hljs-title,
body.dark-theme pre.pre-dark .hljs-title.class_,
body.dark-theme pre.pre-dark .hljs-title.function_,
body.dark-theme pre.pre-dark .hljs-built_in,
body.dark-theme pre.pre-dark .hljs-name,
body.dark-theme pre.pre-dark .hljs-section { color: var(--cg-ice) !important; }
body.dark-theme pre.pre-dark .hljs-string,
body.dark-theme pre.pre-dark .hljs-regexp,
body.dark-theme pre.pre-dark .hljs-addition { color: #8cf7c8 !important; }
body.dark-theme pre.pre-dark .hljs-number,
body.dark-theme pre.pre-dark .hljs-attr,
body.dark-theme pre.pre-dark .hljs-attribute,
body.dark-theme pre.pre-dark .hljs-literal,
body.dark-theme pre.pre-dark .hljs-type,
body.dark-theme pre.pre-dark .hljs-variable,
body.dark-theme pre.pre-dark .hljs-template-variable,
body.dark-theme pre.pre-dark .hljs-symbol,
body.dark-theme pre.pre-dark .hljs-bullet,
body.dark-theme pre.pre-dark .hljs-link,
body.dark-theme pre.pre-dark .hljs-meta,
body.dark-theme pre.pre-dark .hljs-params { color: #8fb4ff !important; }
body.dark-theme pre.pre-dark .hljs-comment,
body.dark-theme pre.pre-dark .hljs-quote,
body.dark-theme pre.pre-dark .hljs-deletion { color: #6b8aa3 !important; }