/* DiaZan — Material-3-inspired token palette (light default, .dark overrides) */
:root {
  color-scheme: light;
  --c-background: 247 250 252;
  --c-on-background: 20 24 31;
  --c-surface: 255 255 255;
  --c-surface-dim: 217 222 229;
  --c-surface-bright: 255 255 255;
  --c-surface-container-lowest: 255 255 255;
  --c-surface-container-low: 243 246 249;
  --c-surface-container: 237 241 245;
  --c-surface-container-high: 230 235 240;
  --c-surface-container-highest: 223 229 235;
  --c-surface-variant: 221 228 234;
  --c-on-surface: 20 24 31;
  --c-on-surface-variant: 75 87 104;
  --c-outline: 116 129 143;
  --c-outline-variant: 199 208 217;

  --c-primary: 12 122 179;
  --c-on-primary: 255 255 255;
  --c-primary-container: 215 240 255;
  --c-on-primary-container: 0 55 81;
  --c-surface-tint: 12 122 179;

  --c-secondary: 15 107 76;
  --c-on-secondary: 255 255 255;
  --c-secondary-container: 183 242 215;
  --c-on-secondary-container: 0 49 31;

  --c-tertiary: 138 91 0;
  --c-on-tertiary: 255 255 255;
  --c-tertiary-container: 255 221 184;
  --c-on-tertiary-container: 74 44 0;

  --c-error: 179 38 30;
  --c-on-error: 255 255 255;
  --c-error-container: 255 218 214;
  --c-on-error-container: 65 0 2;

  --c-inverse-surface: 44 49 53;
  --c-inverse-on-surface: 238 241 245;
  --c-inverse-primary: 137 206 255;

  /* "fixed" roles are identical across themes by design */
  --c-primary-fixed: 201 230 255;
  --c-primary-fixed-dim: 137 206 255;
  --c-on-primary-fixed: 0 30 47;
  --c-on-primary-fixed-variant: 0 76 110;
  --c-secondary-fixed: 166 242 209;
  --c-secondary-fixed-dim: 139 214 182;
  --c-on-secondary-fixed: 0 33 22;
  --c-on-secondary-fixed-variant: 0 81 59;
  --c-tertiary-fixed: 255 221 184;
  --c-tertiary-fixed-dim: 255 185 95;
  --c-on-tertiary-fixed: 42 23 0;
  --c-on-tertiary-fixed-variant: 101 62 0;
}

html.dark {
  color-scheme: dark;
  --c-background: 15 20 24;
  --c-on-background: 222 227 233;
  --c-surface: 15 20 24;
  --c-surface-dim: 15 20 24;
  --c-surface-bright: 53 58 62;
  --c-surface-container-lowest: 10 15 19;
  --c-surface-container-low: 23 28 32;
  --c-surface-container: 27 32 36;
  --c-surface-container-high: 37 43 47;
  --c-surface-container-highest: 48 53 58;
  --c-surface-variant: 48 53 58;
  --c-on-surface: 222 227 233;
  --c-on-surface-variant: 190 200 210;
  --c-outline: 136 146 155;
  --c-outline-variant: 62 72 80;

  --c-primary: 137 206 255;
  --c-on-primary: 0 52 77;
  --c-primary-container: 14 165 233;
  --c-on-primary-container: 0 55 81;
  --c-surface-tint: 137 206 255;

  --c-secondary: 139 214 182;
  --c-on-secondary: 0 56 40;
  --c-secondary-container: 0 92 67;
  --c-on-secondary-container: 135 210 178;

  --c-tertiary: 255 185 95;
  --c-on-tertiary: 71 42 0;
  --c-tertiary-container: 216 138 0;
  --c-on-tertiary-container: 74 44 0;

  --c-error: 255 180 171;
  --c-on-error: 105 0 5;
  --c-error-container: 147 0 10;
  --c-on-error-container: 255 218 214;

  --c-inverse-surface: 222 227 233;
  --c-inverse-on-surface: 44 49 53;
  --c-inverse-primary: 0 101 145;
}

/* Pure-CSS fallback for prefers-color-scheme, applied only when JS hasn't
   already made an explicit choice (see theme-head.php). This also gives the
   browser genuine static evidence that the page implements its own dark
   theme, so its forced/auto dark-mode heuristic reliably backs off instead
   of repainting the page itself. */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    color-scheme: dark;
    --c-background: 15 20 24;
    --c-on-background: 222 227 233;
    --c-surface: 15 20 24;
    --c-surface-dim: 15 20 24;
    --c-surface-bright: 53 58 62;
    --c-surface-container-lowest: 10 15 19;
    --c-surface-container-low: 23 28 32;
    --c-surface-container: 27 32 36;
    --c-surface-container-high: 37 43 47;
    --c-surface-container-highest: 48 53 58;
    --c-surface-variant: 48 53 58;
    --c-on-surface: 222 227 233;
    --c-on-surface-variant: 190 200 210;
    --c-outline: 136 146 155;
    --c-outline-variant: 62 72 80;

    --c-primary: 137 206 255;
    --c-on-primary: 0 52 77;
    --c-primary-container: 14 165 233;
    --c-on-primary-container: 0 55 81;
    --c-surface-tint: 137 206 255;

    --c-secondary: 139 214 182;
    --c-on-secondary: 0 56 40;
    --c-secondary-container: 0 92 67;
    --c-on-secondary-container: 135 210 178;

    --c-tertiary: 255 185 95;
    --c-on-tertiary: 71 42 0;
    --c-tertiary-container: 216 138 0;
    --c-on-tertiary-container: 74 44 0;

    --c-error: 255 180 171;
    --c-on-error: 105 0 5;
    --c-error-container: 147 0 10;
    --c-on-error-container: 255 218 214;

    --c-inverse-surface: 222 227 233;
    --c-inverse-on-surface: 44 49 53;
    --c-inverse-primary: 0 101 145;
  }
}

* { box-sizing: border-box; }
html, body { padding: 0; margin: 0; }
a { color: inherit; text-decoration: none; }

/* Isolate the whole page onto its own compositing layer. This is a known,
   working escape hatch against Chromium's forced/auto dark-mode color
   rewriting (which is a per-layer render-tree pass): layer-promoted
   subtrees are skipped by it, so the site's own palette renders untouched
   regardless of the browser's "darken web content" setting. The header
   already relied on this trick (see below) and rendered correctly even
   when the rest of an unpatched page was being recolored purple. */
body {
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}

/* Force the sticky header onto its own GPU layer so Chromium recomposites it
   cleanly on scroll instead of occasionally showing a stale/ghosted frame of
   whatever scrolled underneath (most visible on software-rendered/VM displays). */
header.sticky {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  isolation: isolate;
  background-color: rgb(var(--c-surface));
}
img { max-width: 100%; }

.shimmer {
  background: linear-gradient(to right, rgb(var(--c-surface-container-high)) 4%, rgb(var(--c-surface-container-highest)) 25%, rgb(var(--c-surface-container-high)) 36%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}
@keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }

.fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s ease-out forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.article-content p { margin-bottom: 24px; font-size: 18px; line-height: 28px; color: rgb(var(--c-on-surface)); }
.article-content h2 { margin-top: 40px; margin-bottom: 12px; font-size: 24px; line-height: 32px; font-weight: 600; color: rgb(var(--c-on-surface)); }
.article-content ul { list-style-type: disc; margin-left: 24px; margin-bottom: 24px; color: rgb(var(--c-on-surface)); }
.article-content li { margin-bottom: 8px; font-size: 16px; line-height: 24px; }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }