/* Homepage Liquid Glass (Apple HIG "Materials"): glass only on the controls that float above the content;
   the content itself sits on standard materials. liquid-glass.js drives the lamp, the nav droplet and,
   on Chromium only, the edge refraction.

   Keep .post and its ancestors (.container[role="main"], body, header, #navbar, .post-list) free of backdrop-filter,
   filter, opacity < 1, transform, mask, clip-path, will-change, isolation and z-index. Any of them turns .post into
   a stacking context, so the ball's ink (z-index 1) would paint over the text, or into a backdrop root, so the glass
   inside it would have nothing to blur. */

@property --lx {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.64;
}

@property --ly {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.79;
}

@property --glow {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --px {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --py {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

body.liquid-glass-page {
  --glass-content: min(1364px, 92vw); /* max_width in _config.yml */
  /* Palette inputs stay in CSS; scroll-ball.js only overrides the six displayed colors while active.
     The same sRGB mixes provide the initial wallpaper without JavaScript or an animated ball. */
  --glass-palette-base: #86b3a2;
  --glass-neutral-start: #f7f8fa;
  --glass-neutral-end: #f7f8fa;
  --glass-mix-start: 12%;
  --glass-mix-end: 22%;
  --glass-halo-opacity-1: 20%;
  --glass-halo-opacity-2: 12%;
  --glass-halo-opacity-3: 16%;
  --glass-halo-opacity-4: 10%;
  --glass-bg-start: color-mix(in srgb, var(--glass-palette-base) var(--glass-mix-start), var(--glass-neutral-start));
  --glass-bg-end: color-mix(in srgb, var(--glass-palette-base) var(--glass-mix-end), var(--glass-neutral-end));
  --glass-halo-1: color-mix(in srgb, var(--glass-palette-base) var(--glass-halo-opacity-1), transparent);
  --glass-halo-2: color-mix(in srgb, var(--glass-palette-base) var(--glass-halo-opacity-2), transparent);
  --glass-halo-3: color-mix(in srgb, var(--glass-palette-base) var(--glass-halo-opacity-3), transparent);
  --glass-halo-4: color-mix(in srgb, var(--glass-palette-base) var(--glass-halo-opacity-4), transparent);
  --glass-paper: var(--glass-bg-start); /* Opaque paper also used by the ball's unpainted cap. */
  --glass-wallpaper:
    radial-gradient(55% 45% at 8% 4%, var(--glass-halo-1), transparent 70%), radial-gradient(50% 42% at 94% 8%, var(--glass-halo-2), transparent 70%),
    radial-gradient(48% 52% at 86% 92%, var(--glass-halo-3), transparent 70%),
    radial-gradient(44% 48% at 6% 94%, var(--glass-halo-4), transparent 70%), linear-gradient(165deg, var(--glass-bg-start), var(--glass-bg-end));
  --glass-sheet: rgb(255 255 255 / 0.55);
  --glass-card: rgb(255 255 255 / 0.48);
  --glass-card-lit: rgb(255 255 255 / 0.72);
  --glass-fill: rgb(255 255 255 / 0.4);
  --glass-fill-strong: rgb(255 255 255 / 0.68);
  --glass-drop: rgb(255 255 255 / 0.62);
  --glass-rim-lit: rgb(255 255 255 / 0.9);
  --glass-rim-far: rgb(255 255 255 / 0.35);
  --glass-hairline: rgb(255 255 255 / 0.5);
  --glass-edge: rgb(12 48 28 / 0.1);
  --glass-float: 0 14px 34px -14px rgb(6 40 22 / 0.32), 0 2px 6px -2px rgb(6 40 22 / 0.14);
  --glass-rest: 0 12px 32px -22px rgb(6 40 22 / 0.35);
  --glass-lift: 0 26px 48px -20px rgb(6 40 22 / 0.42), 0 8px 18px -8px rgb(6 40 22 / 0.2);
  --glass-ring: rgb(10 134 69 / 0.38);
  --glass-sheen: 0.3;
  --glass-glow-rgb: 61 220 132; /* White light disappears on white cards, so they glow in the accent. */
  --glass-glow: 0.26;
  --glass-blur: 14px;
  --glass-blur-card: 18px;
  --glass-blur-panel: 20px;
  --glass-sat: 180%;
  --glass-refract: saturate(1); /* Identity; liquid-glass.js swaps in url(#glass-lens-N) on Chromium. */
  --glass-title: #19a85a;
  --glass-on-accent: #fff;
  --glass-spring: cubic-bezier(0.3, 0.7, 0.2, 1.25);
  --global-text-color-light: #5b6660; /* #828282 falls short of 4.5:1 on pale glass. */
  background-color: var(--glass-paper);
}

body.liquid-glass-page[data-glass-palette="red"] {
  --glass-palette-base: #d49ba5;
}

body.liquid-glass-page[data-glass-palette="orange"] {
  --glass-palette-base: #d2af88;
}

body.liquid-glass-page[data-glass-palette="yellow"] {
  --glass-palette-base: #c4bd87;
}

body.liquid-glass-page[data-glass-palette="green"] {
  --glass-palette-base: #90b299;
}

body.liquid-glass-page[data-glass-palette="cyan"] {
  --glass-palette-base: #87afb8;
}

body.liquid-glass-page[data-glass-palette="blue"] {
  --glass-palette-base: #97a9ce;
}

body.liquid-glass-page[data-glass-palette="purple"] {
  --glass-palette-base: #b39bc5;
}

html[data-theme="dark"] body.liquid-glass-page {
  --glass-neutral-start: #101318;
  --glass-neutral-end: #0b1016;
  --glass-mix-start: 10%;
  --glass-mix-end: 18%;
  --glass-halo-opacity-1: 12%;
  --glass-halo-opacity-2: 8%;
  --glass-halo-opacity-3: 10%;
  --glass-halo-opacity-4: 6%;
  --glass-sheet: rgb(22 26 24 / 0.55);
  --glass-card: rgb(255 255 255 / 0.05);
  --glass-card-lit: rgb(255 255 255 / 0.09);
  --glass-fill: rgb(28 32 30 / 0.55);
  --glass-fill-strong: rgb(28 32 30 / 0.78);
  --glass-drop: rgb(255 255 255 / 0.14);
  --glass-rim-lit: rgb(255 255 255 / 0.28);
  --glass-rim-far: rgb(255 255 255 / 0.08);
  --glass-hairline: rgb(255 255 255 / 0.1);
  --glass-edge: rgb(0 0 0 / 0.45);
  --glass-float: 0 14px 34px -14px rgb(0 0 0 / 0.7), 0 2px 6px -2px rgb(0 0 0 / 0.5);
  --glass-rest: 0 12px 32px -22px rgb(0 0 0 / 0.8);
  --glass-lift: 0 26px 48px -20px rgb(0 0 0 / 0.85), 0 8px 18px -8px rgb(0 0 0 / 0.6);
  --glass-ring: rgb(61 220 132 / 0.42);
  --glass-sheen: 0.12;
  --glass-glow-rgb: 255 255 255;
  --glass-glow: 0.14;
  --glass-title: #3ddc84;
  --glass-on-accent: #0b1d13;
  --global-text-color-light: #a2aca7;
}

/* The shared theme rule must not add a second background transition after each animation frame. */
html.transition body.liquid-glass-page,
html.transition body.liquid-glass-page::before,
html.transition body.liquid-glass-page::after {
  transition-property: color, border-color, fill, stroke !important;
}

/* Clearer glass where the edges refract, so the lensing reads. */
html.liquid-glass-refraction body.liquid-glass-page {
  --glass-blur: 6px;
}

@supports (transition-timing-function: linear(0, 1)) {
  body.liquid-glass-page {
    --glass-spring: linear(
      0,
      0.031 3%,
      0.112 6%,
      0.224 9%,
      0.352 12%,
      0.527 16%,
      0.689 20%,
      0.856 25%,
      0.976 30%,
      1.06 36%,
      1.092 42%,
      1.091 48%,
      1.067 55%,
      1.039 62%,
      1.012 70%,
      0.995 80%,
      0.991 90%,
      1
    );
  }
}

/* Wallpaper, and a scroll edge band that fades content into it under the navbar. Both use the same tile,
   so the band lines up with the wallpaper exactly. The wallpaper relies on body's background reaching the canvas:
   it breaks if html ever gets a background of its own. */
body.liquid-glass-page::before,
body.liquid-glass-page::after {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  pointer-events: none;
  background-color: var(--glass-paper);
  background-image: var(--glass-wallpaper);
  background-size: 100% 100vh;
  background-size: 100% 100lvh;
}

body.liquid-glass-page::before {
  z-index: -1;
  height: 100vh;
  height: 100lvh;
}

/* Below .fixed-top (1030), above the ball (85 at most). No backdrop-filter: the capsule samples this band, so it
   must stay thin enough for the content under the capsule to show through. */
body.liquid-glass-page::after {
  z-index: 1029;
  height: 98px;
  -webkit-mask-image: linear-gradient(rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.35) 66px, transparent);
  mask-image: linear-gradient(rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.35) 66px, transparent);
}

body.liquid-glass-page.fixed-top-nav {
  padding-top: 86px; /* 8px above the 78px capsule. */
}

body.liquid-glass-page > .container[role="main"] {
  margin-top: 28px !important; /* Overrides the shared .mt-5 spacing. */
}

body.liquid-glass-page :is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: 98px;
}

/* Content layer: standard materials. The sheet only gets a background, a radius and a shadow (see the top note). */
body.liquid-glass-page .container[role="main"] > .post {
  padding-top: 0;
  border-radius: 28px;
  background-color: var(--glass-sheet);
  box-shadow:
    inset 0.8px 1px 0 var(--glass-rim-lit),
    inset 0 0 0 1px var(--glass-hairline),
    var(--glass-rest);
}

body.liquid-glass-page .header-bar {
  border-bottom: 0;
  padding-block: 3.5rem;
}

body.liquid-glass-page .header-bar h2 {
  margin-bottom: 0;
}

body.liquid-glass-page .header-bar h1 {
  width: fit-content;
  margin-inline: auto;
  color: transparent;
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--glass-title) 65%, white) 5%,
    var(--glass-title) 50%,
    color-mix(in oklab, var(--glass-title) 88%, black) 95%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* Lit surfaces carry their own rims: var(--lx) has to resolve on the element the lamp writes to. */
body.liquid-glass-page #navbar > .container,
html body.liquid-glass-page #back-to-top,
body.liquid-glass-page .ball__settings-trigger,
body.liquid-glass-page .ball__settings,
body.liquid-glass-page .pagination .page-item .page-link,
body.liquid-glass-page .post-list > li,
body.liquid-glass-page .featured-posts .card {
  --glass-rims:
    inset calc(var(--lx, 0.64) * 1.25px) calc(var(--ly, 0.79) * 1.25px) 0 var(--glass-rim-lit),
    inset calc(var(--lx, 0.64) * -1px) calc(var(--ly, 0.79) * -1px) 0 var(--glass-rim-far), inset 0 0 0 1px var(--glass-hairline),
    0 0 0 0.5px var(--glass-edge);
}

/* Cards: a thin frosted material, lit toward the lamp, with a sheen under the pointer. Only the ball's ink is worth
   frosting, so the blur waits for the ball. */
body.liquid-glass-page .post-list > li,
body.liquid-glass-page .featured-posts .card {
  margin-bottom: 1.25rem;
  padding: 1.5rem 1.75rem;
  border: 0;
  border-radius: 22px;
  background:
    radial-gradient(18rem circle at var(--px, 50%) var(--py, 0%), rgb(var(--glass-glow-rgb) / calc(var(--glow, 0) * var(--glass-glow))), transparent),
    linear-gradient(atan2(var(--lx, 0.64), calc(-1 * var(--ly, 0.79))), var(--glass-card-lit), var(--glass-card));
  box-shadow: var(--glass-rims), var(--glass-rest);
}

body.liquid-glass-page.scroll-ball-active .post-list > li,
body.liquid-glass-page.scroll-ball-active .featured-posts .card {
  -webkit-backdrop-filter: blur(var(--glass-blur-card));
  backdrop-filter: blur(var(--glass-blur-card));
}

/* Navbar: the bar disappears and its container becomes a floating capsule. 8px + 78px fills the 86px
   reserved above; on phones the collapse wraps inside it, so it grows into a rounded panel. */
body.liquid-glass-page #navbar {
  height: auto;
  padding: 8px 1rem 0;
  align-items: flex-start;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

body.liquid-glass-page #navbar > .container {
  position: relative;
  isolation: isolate;
  pointer-events: auto;
  max-width: calc(var(--glass-content) - 30px) !important; /* Lines up with the .post sheet. */
  min-height: 78px;
  padding-block: 6px;
  padding-inline: 1.25rem 0.75rem;
  border-radius: 39px;
}

/* Liquid Glass: frost (and lens, on Chromium) whatever passes underneath, rims lit by the lamp, a pointer sheen. */
body.liquid-glass-page #navbar > .container,
html body.liquid-glass-page #back-to-top,
body.liquid-glass-page .ball__settings-trigger,
body.liquid-glass-page .pagination .page-item:not(.disabled) .page-link {
  background:
    radial-gradient(6rem circle at var(--px, 50%) var(--py, 0%), rgb(255 255 255 / calc(var(--glow, 0) * var(--glass-sheen))), transparent),
    var(--glass-tint, var(--glass-fill));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) var(--glass-refract) saturate(var(--glass-sat)); /* Bend after the frost, or it blurs the bend away. */
  box-shadow: var(--glass-rims), var(--glass-float);
}

/* The droplet behind the active or hovered link. Fill only: the capsule is its backdrop root, so glass in glass
   would have nothing to sample. */
body.liquid-glass-page .glass__drop {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: var(--drop-w, 0);
  height: var(--drop-h, 0);
  translate: var(--drop-x, 0) var(--drop-y, 0);
  border-radius: 999px;
  background: var(--glass-drop);
  box-shadow:
    inset 0 1px 0 var(--glass-rim-lit),
    inset 0 -1px 1px rgb(0 0 0 / 0.05),
    0 2px 8px -3px rgb(0 0 0 / 0.18);
  opacity: 0;
  pointer-events: none;
}

body.liquid-glass-page .glass__drop--shown {
  opacity: 1;
}

body.liquid-glass-page .glass__drop--pressed {
  scale: 1.08;
}

@media (min-width: 576px) {
  body.liquid-glass-page #navbar > .glass__capsule .nav-item.active > .nav-link::after {
    content: none;
  }
}

body.liquid-glass-page #navbar .nav-link:focus-visible,
body.liquid-glass-page #navbar .navbar-toggler:focus-visible,
body.liquid-glass-page #search-toggle:focus-visible,
body.liquid-glass-page #light-toggle:focus-visible {
  outline: 2px solid var(--global-theme-color);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Pagination: glass keys; the current page is solid accent so its number keeps its contrast. */
body.liquid-glass-page .pagination {
  flex-wrap: wrap;
  gap: 0.6rem;
}

body.liquid-glass-page .pagination .page-item .page-link {
  display: grid;
  place-items: center;
  min-width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 999px;
  color: var(--global-text-color);
  transition: color 0.2s; /* Replaces MDB's transition: all 0.3s linear. */
}

body.liquid-glass-page .pagination .page-item.active .page-link {
  --glass-tint: var(--global-theme-color);
  width: 3rem;
  padding: 0;
  color: var(--glass-on-accent);
}

body.liquid-glass-page .pagination .page-item:not(.disabled):not(.active) .page-link:hover {
  color: var(--global-theme-color);
}

body.liquid-glass-page .pagination .page-item.disabled .page-link {
  background: transparent;
  box-shadow: none;
  opacity: 0.45;
}

body.liquid-glass-page .pagination .page-item .page-link:focus {
  outline: none;
}

body.liquid-glass-page .pagination .page-item .page-link:focus-visible {
  outline: 2px solid var(--global-theme-color);
  outline-offset: 3px;
}

html body.liquid-glass-page #back-to-top {
  display: grid;
  place-items: center;
  color: var(--global-text-color);
}

html body.liquid-glass-page #back-to-top svg {
  margin: 0;
}

/* Ball settings: a glass bead that fills with the accent on hover, and a glass panel once it opens. */
body.liquid-glass-page .ball__settings-trigger {
  border: 0;
  border-radius: 50%;
  background: linear-gradient(var(--glass-fill) 50%, var(--ball-accent) 50%) 0 0 / 100% 200%;
}

body.liquid-glass-page .ball__settings-trigger:hover {
  background-position: 0 100%;
}

body.liquid-glass-page .ball__settings-trigger[aria-expanded="true"] {
  box-shadow:
    var(--glass-rims),
    0 0 0 1.5px var(--ball-accent),
    var(--glass-float);
}

body.liquid-glass-page .ball__settings {
  border-radius: 22px;
}

/* No url() here: it would make backdrop-filter jump instead of fading with the panel. */
body.liquid-glass-page .ball__settings--open {
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-sat));
  box-shadow: var(--glass-rims), var(--glass-float);
}

/* A card under the pointer or holding focus lights up: an accent rim and halo, and a deeper shadow as it lifts. */
body.liquid-glass-page .post-list > li:focus-within,
body.liquid-glass-page .featured-posts .card:focus-within {
  --glow: 0.6;
  box-shadow:
    var(--glass-rims),
    0 0 0 1px var(--glass-ring),
    0 0 26px -8px var(--glass-ring),
    var(--glass-lift);
}

@media (hover: hover) {
  body.liquid-glass-page .post-list > li:hover,
  body.liquid-glass-page .featured-posts .card:hover {
    box-shadow:
      var(--glass-rims),
      0 0 0 1px var(--glass-ring),
      0 0 26px -8px var(--glass-ring),
      var(--glass-lift);
  }

  body.liquid-glass-page .post-list > li:hover .post-title {
    color: var(--global-theme-color);
  }

  body.liquid-glass-page .post-list > li:hover,
  body.liquid-glass-page .featured-posts .card:hover,
  html body.liquid-glass-page #back-to-top:hover,
  body.liquid-glass-page .pagination .page-item:not(.disabled) .page-link:hover {
    --glow: 1;
  }

  body.liquid-glass-page #navbar > .container:hover {
    --glow: 0.7;
  }
}

body.liquid-glass-page .post-list > li:active,
body.liquid-glass-page .featured-posts .card:active,
html body.liquid-glass-page #back-to-top:active,
body.liquid-glass-page .pagination .page-item:not(.disabled) .page-link:active {
  --glow: 1.3;
}

/* Outside this block, transitions would override the reduce rules in scroll-ball.css. The settings trigger keeps
   its own show and hide transitions from there. */
@media (prefers-reduced-motion: no-preference) {
  body.liquid-glass-page .post-list > li,
  body.liquid-glass-page .featured-posts .card,
  body.liquid-glass-page #navbar > .container,
  body.liquid-glass-page .pagination .page-item .page-link {
    transition:
      --lx 0.3s,
      --ly 0.3s,
      --glow 0.35s,
      translate 0.5s var(--glass-spring),
      scale 0.45s var(--glass-spring),
      box-shadow 0.4s ease,
      color 0.2s;
  }

  html body.liquid-glass-page #back-to-top {
    transition:
      --lx 0.3s,
      --ly 0.3s,
      --glow 0.35s,
      scale 0.45s var(--glass-spring),
      bottom 0.2s,
      opacity 0.2s;
  }

  body.liquid-glass-page .ball__settings {
    transition:
      background-color 0.3s 0.2s,
      box-shadow 0.3s 0.2s,
      -webkit-backdrop-filter 0.3s 0.2s,
      backdrop-filter 0.3s 0.2s;
  }

  body.liquid-glass-page .ball__settings--open {
    transition-delay: 0s;
  }

  body.liquid-glass-page .glass__drop {
    transition: opacity 0.2s;
  }

  body.liquid-glass-page .glass__drop--shown:not(.glass__drop--instant) {
    transition:
      opacity 0.2s,
      translate 0.6s var(--glass-spring),
      width 0.6s var(--glass-spring),
      height 0.6s var(--glass-spring),
      scale 0.3s var(--glass-spring);
  }

  body.liquid-glass-page .post-list > li .post-title {
    transition: color 0.2s;
  }

  body.liquid-glass-page .post-list > li:hover,
  body.liquid-glass-page .post-list > li:focus-within,
  body.liquid-glass-page .featured-posts .card:hover {
    translate: 0 -5px;
  }

  body.liquid-glass-page .post-list > li:active,
  body.liquid-glass-page .featured-posts .card:active {
    translate: 0 -2px;
  }

  body.liquid-glass-page .pagination .page-item:not(.disabled) .page-link:active,
  html body.liquid-glass-page #back-to-top:active {
    scale: 1.06;
  }
}

/* Same breakpoint as _blog.scss, where the sheet goes full bleed. */
@media (max-width: 576px) {
  body.liquid-glass-page .container[role="main"] > .post {
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }

  body.liquid-glass-page .post-list > li,
  body.liquid-glass-page .featured-posts .card {
    padding: 1.25rem 1rem;
    border-radius: 18px;
  }

  body.liquid-glass-page .pagination {
    gap: 0.4rem;
  }

  body.liquid-glass-page .pagination .page-item .page-link {
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.6rem;
    font-size: 1rem;
  }

  body.liquid-glass-page .pagination .page-item.active .page-link {
    width: 2.5rem;
    padding: 0;
  }
}

/* Same breakpoint as Bootstrap's collapsed navbar, which also drops the container's side padding. */
@media (max-width: 575.98px) {
  body.liquid-glass-page #navbar > .container {
    max-width: none !important;
    padding-inline: 0.875rem 0.375rem;
  }

  body.liquid-glass-page .glass__drop {
    display: none;
  }

  body.liquid-glass-page #navbar .nav-item.active > .nav-link {
    border-radius: 999px;
    background-color: var(--glass-drop);
  }

  body.liquid-glass-page #navbar .nav-item.active > .nav-link::after {
    content: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.liquid-glass-page {
    --glass-fill: rgb(255 255 255 / 0.86);
    --glass-fill-strong: rgb(255 255 255 / 0.94);
  }

  html[data-theme="dark"] body.liquid-glass-page {
    --glass-fill: rgb(28 32 30 / 0.9);
    --glass-fill-strong: rgb(28 32 30 / 0.96);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.liquid-glass-page,
  html[data-theme="dark"] body.liquid-glass-page {
    --glass-sheet: var(--global-bg-color);
    --glass-card: var(--global-card-bg-color);
    --glass-card-lit: var(--global-card-bg-color);
    --glass-fill: var(--global-bg-color);
    --glass-fill-strong: var(--global-bg-color);
  }

  body.liquid-glass-page #navbar > .container,
  html body.liquid-glass-page #back-to-top,
  body.liquid-glass-page .ball__settings-trigger,
  body.liquid-glass-page .pagination .page-item:not(.disabled) .page-link,
  body.liquid-glass-page.scroll-ball-active .post-list > li,
  body.liquid-glass-page.scroll-ball-active .featured-posts .card,
  body.liquid-glass-page .ball__settings--open {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  body.liquid-glass-page {
    --glass-sheet: rgb(255 255 255 / 0.9);
    --glass-card: rgb(255 255 255 / 0.92);
    --glass-card-lit: rgb(255 255 255 / 0.92);
    --glass-fill: rgb(255 255 255 / 0.9);
    --glass-fill-strong: rgb(255 255 255 / 0.96);
    --glass-hairline: rgb(0 0 0 / 0.35);
    --glass-sat: 100%;
    --global-text-color-light: #3f4743;
  }

  html[data-theme="dark"] body.liquid-glass-page {
    --glass-sheet: rgb(22 26 24 / 0.92);
    --glass-card: rgb(34 38 36 / 0.92);
    --glass-card-lit: rgb(34 38 36 / 0.92);
    --glass-fill: rgb(28 32 30 / 0.92);
    --glass-fill-strong: rgb(28 32 30 / 0.97);
    --glass-hairline: rgb(255 255 255 / 0.45);
    --global-text-color-light: #c8d0cc;
  }

  body.liquid-glass-page .header-bar h1 {
    color: var(--global-theme-color);
    background: none;
  }
}

@media (forced-colors: active) {
  body.liquid-glass-page::before,
  body.liquid-glass-page::after,
  body.liquid-glass-page .glass__drop {
    display: none;
  }

  body.liquid-glass-page #navbar > .container,
  html body.liquid-glass-page #back-to-top,
  body.liquid-glass-page .ball__settings-trigger,
  body.liquid-glass-page .pagination .page-item:not(.disabled) .page-link,
  body.liquid-glass-page.scroll-ball-active .post-list > li,
  body.liquid-glass-page.scroll-ball-active .featured-posts .card,
  body.liquid-glass-page .ball__settings--open {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.liquid-glass-page #navbar > .container,
  html body.liquid-glass-page #back-to-top,
  body.liquid-glass-page .ball__settings-trigger,
  body.liquid-glass-page .ball__settings--open,
  body.liquid-glass-page .pagination .page-item .page-link,
  body.liquid-glass-page .container[role="main"] > .post,
  body.liquid-glass-page .post-list > li,
  body.liquid-glass-page .featured-posts .card {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }

  body.liquid-glass-page .header-bar h1 {
    color: CanvasText;
    background: none;
  }

  body.liquid-glass-page #navbar > .glass__capsule .nav-item.active > .nav-link::after,
  body.liquid-glass-page #navbar .nav-item.active > .nav-link::after {
    content: "";
    background-color: CanvasText;
    forced-color-adjust: none;
  }
}

@media print {
  body.liquid-glass-page::before,
  body.liquid-glass-page::after {
    display: none;
  }
}