website/src/css/custom.css

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/* ==========================================================================
   OpenDAL Design System
   --------------------------------------------------------------------------
   "One Layer, All Storage." A precise, engineering-grade visual system built
   on a near-monochrome ink scale, a single precise-blue accent, and the
   signature solid "bar" lifted from the OpenDAL wordmark.

   Token layers:
     1. Primitives  — raw, theme-agnostic values (--odl-ink-*, --odl-blue-*)
     2. Semantic    — meaning-bound, theme-aware roles (--odl-bg, --odl-fg ...)
     3. Infima map  — semantic tokens projected onto Docusaurus/Infima vars so
                      docs, blog and community pages inherit the same system.

   Typography uses native system stacks on purpose: zero third-party requests
   (ASF privacy-friendly), zero layout shift, instant global rendering. The
   monospace stack is promoted to a brand motif (labels, indices, figures).
   To adopt IBM Plex instead, self-host it and swap --odl-font-* below.
   ========================================================================== */

/* ---- 1. Primitive tokens ------------------------------------------------- */
:root {
  /* Ink — a cool, neutral near-black→white ramp */
  --odl-ink-0: #ffffff;
  --odl-ink-50: #f6f8fa;
  --odl-ink-100: #edf1f5;
  --odl-ink-150: #e4e9ef;
  --odl-ink-200: #d8dee6;
  --odl-ink-300: #c2cad4;
  --odl-ink-400: #98a2b0;
  --odl-ink-500: #6e7886;
  --odl-ink-600: #4f5864;
  --odl-ink-700: #39414b;
  --odl-ink-800: #262c34;
  --odl-ink-850: #1b2027;
  --odl-ink-900: #12161b;
  --odl-ink-950: #0a0d11;

  /* Precise blue — the single brand accent */
  --odl-blue-50: #edf3ff;
  --odl-blue-100: #d8e5ff;
  --odl-blue-200: #b4ccff;
  --odl-blue-300: #85a9ff;
  --odl-blue-400: #5384ff;
  --odl-blue-500: #2c63f5;
  --odl-blue-600: #1e54e0;
  --odl-blue-700: #1846be;
  --odl-blue-800: #163a97;
  --odl-blue-900: #163172;

  /* Functional signals (kept restrained, mostly for inherited docs UI) */
  --odl-green-500: #1a8f5e;
  --odl-green-400: #36c08a;
  --odl-amber-500: #b7791f;
  --odl-amber-400: #e0a93b;
  --odl-red-500: #d23b3b;
  --odl-red-400: #f06363;

  /* Type families — system stacks with a clear engineering character */
  --odl-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --odl-font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code",
    "JetBrains Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono",
    monospace;

  /* Type scale */
  --odl-text-2xs: 0.6875rem; /* 11px — mono micro-labels */
  --odl-text-xs: 0.75rem; /* 12px */
  --odl-text-sm: 0.875rem; /* 14px */
  --odl-text-base: 1rem; /* 16px */
  --odl-text-md: 1.125rem; /* 18px */
  --odl-text-lg: 1.375rem; /* 22px */
  --odl-text-xl: 1.75rem; /* 28px */
  --odl-text-2xl: 2.25rem; /* 36px */
  --odl-text-3xl: 3rem; /* 48px */
  --odl-text-display: clamp(2.75rem, 1.6rem + 5.2vw, 5rem);
  --odl-leading-tight: 1.08;
  --odl-leading-snug: 1.28;
  --odl-leading-normal: 1.6;
  --odl-tracking-tight: -0.022em;
  --odl-tracking-label: 0.12em;

  /* Spacing — 4px rhythm */
  --odl-space-1: 0.25rem;
  --odl-space-2: 0.5rem;
  --odl-space-3: 0.75rem;
  --odl-space-4: 1rem;
  --odl-space-5: 1.5rem;
  --odl-space-6: 2rem;
  --odl-space-7: 3rem;
  --odl-space-8: 4rem;
  --odl-space-9: 6rem;
  --odl-space-10: 8rem;

  /* Radius — restrained; the bar motif stays sharp (0) */
  --odl-radius-xs: 3px;
  --odl-radius-sm: 5px;
  --odl-radius-md: 8px;
  --odl-radius-lg: 12px;
  --odl-radius-pill: 999px;

  /* Layout */
  --odl-container: 1200px;
  --odl-container-narrow: 880px;
  --odl-gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem);

  /* Motion */
  --odl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --odl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --odl-dur-fast: 120ms;
  --odl-dur: 200ms;
  --odl-dur-slow: 320ms;
}

/* ---- 2. Semantic tokens — light (default) -------------------------------- */
:root {
  --odl-bg: var(--odl-ink-0);
  --odl-bg-subtle: var(--odl-ink-50);
  --odl-bg-inset: var(--odl-ink-100);
  --odl-surface: var(--odl-ink-0);
  --odl-surface-2: var(--odl-ink-50);
  --odl-fg: var(--odl-ink-900);
  --odl-fg-strong: var(--odl-ink-950);
  --odl-fg-muted: var(--odl-ink-600);
  --odl-fg-subtle: var(--odl-ink-500);
  --odl-border: var(--odl-ink-200);
  --odl-border-strong: var(--odl-ink-300);
  --odl-bar: var(--odl-ink-950);

  --odl-accent: var(--odl-blue-600);
  --odl-accent-hover: var(--odl-blue-700);
  --odl-accent-subtle: var(--odl-blue-50);
  --odl-accent-border: var(--odl-blue-200);
  --odl-link: var(--odl-blue-600);

  /* Solid action surface — vivid blue with white text in both themes */
  --odl-action-bg: var(--odl-blue-600);
  --odl-action-bg-hover: var(--odl-blue-700);
  --odl-action-fg: #ffffff;

  --odl-code-bg: var(--odl-ink-50);
  --odl-code-border: var(--odl-ink-150);
  --odl-selection: var(--odl-blue-100);

  --odl-grid-line: rgba(18, 22, 27, 0.05);
  --odl-shadow-sm: 0 1px 2px rgba(10, 13, 17, 0.06),
    0 1px 1px rgba(10, 13, 17, 0.04);
  --odl-shadow-md: 0 4px 12px rgba(10, 13, 17, 0.07),
    0 1px 3px rgba(10, 13, 17, 0.05);
  --odl-shadow-lg: 0 18px 40px rgba(10, 13, 17, 0.1),
    0 4px 12px rgba(10, 13, 17, 0.06);
}

/* ---- 2b. Semantic tokens — dark ------------------------------------------ */
[data-theme="dark"] {
  --odl-bg: #0a0d11;
  --odl-bg-subtle: #0e1218;
  --odl-bg-inset: #12161d;
  --odl-surface: #11161c;
  --odl-surface-2: #161c24;
  --odl-fg: #e7ebf0;
  --odl-fg-strong: #f6f8fa;
  --odl-fg-muted: #9aa6b3;
  --odl-fg-subtle: #76828f;
  --odl-border: #242c35;
  --odl-border-strong: #313b46;
  --odl-bar: #f6f8fa;

  --odl-accent: var(--odl-blue-300);
  --odl-accent-hover: var(--odl-blue-200);
  --odl-accent-subtle: rgba(44, 99, 245, 0.14);
  --odl-accent-border: rgba(133, 169, 255, 0.32);
  --odl-link: var(--odl-blue-300);

  --odl-action-bg: var(--odl-blue-500);
  --odl-action-bg-hover: var(--odl-blue-400);
  --odl-action-fg: #ffffff;

  --odl-code-bg: #0e131a;
  --odl-code-border: #232b35;
  --odl-selection: rgba(44, 99, 245, 0.36);

  --odl-grid-line: rgba(255, 255, 255, 0.045);
  --odl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --odl-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --odl-shadow-lg: 0 22px 48px rgba(0, 0, 0, 0.6);
}

/* ---- 3. Project onto Infima so docs/blog inherit the system -------------- */
:root {
  --ifm-color-primary: #1e54e0;
  --ifm-color-primary-dark: #1b4bca;
  --ifm-color-primary-darker: #1846be;
  --ifm-color-primary-darkest: #163a9c;
  --ifm-color-primary-light: #3568ef;
  --ifm-color-primary-lighter: #4c79f1;
  --ifm-color-primary-lightest: #79a0f5;

  --ifm-background-color: var(--odl-bg);
  --ifm-background-surface-color: var(--odl-surface);
  --ifm-font-color-base: var(--odl-fg);
  --ifm-heading-color: var(--odl-fg-strong);
  --ifm-font-family-base: var(--odl-font-sans);
  --ifm-heading-font-family: var(--odl-font-sans);
  --ifm-font-family-monospace: var(--odl-font-mono);
  --ifm-font-size-base: 16px;
  --ifm-line-height-base: 1.6;
  --ifm-link-color: var(--odl-link);
  --ifm-link-hover-color: var(--odl-accent-hover);

  --ifm-heading-font-weight: 650;
  --ifm-font-weight-semibold: 600;

  --ifm-navbar-background-color: rgba(255, 255, 255, 0.82);
  --ifm-navbar-shadow: inset 0 -1px 0 var(--odl-border);
  --ifm-navbar-link-color: var(--odl-fg-muted);
  --ifm-navbar-link-hover-color: var(--odl-fg-strong);

  --ifm-toc-border-color: var(--odl-border);
  --ifm-color-emphasis-200: var(--odl-border);
  --ifm-color-emphasis-300: var(--odl-border-strong);

  --ifm-code-font-size: 0.9em;
  --ifm-code-background: var(--odl-code-bg);
  --ifm-code-border-radius: var(--odl-radius-sm);
  --ifm-pre-background: var(--odl-code-bg);

  --ifm-button-border-radius: var(--odl-radius-md);
  --ifm-global-radius: var(--odl-radius-md);

  --docusaurus-highlighted-code-line-bg: rgba(30, 84, 224, 0.1);

  --footer-font-color: var(--odl-fg-muted);
  --footer-column-width: unset;
  --footer-row-max-width: 1100px;
}

[data-theme="dark"] {
  --ifm-color-primary: #5384ff;
  --ifm-color-primary-dark: #3568ef;
  --ifm-color-primary-darker: #2c63f5;
  --ifm-color-primary-darkest: #1e54e0;
  --ifm-color-primary-light: #79a0f5;
  --ifm-color-primary-lighter: #95b5f8;
  --ifm-color-primary-lightest: #b4ccff;

  --ifm-navbar-background-color: rgba(10, 13, 17, 0.78);
  --ifm-navbar-shadow: inset 0 -1px 0 var(--odl-border);
  --docusaurus-highlighted-code-line-bg: rgba(83, 132, 255, 0.16);
}

/* ---- 4. Base element styling --------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--odl-bg);
  color: var(--odl-fg);
  font-feature-settings: "cv05" 1, "ss01" 1;
}

h1,
h2,
h3,
h4 {
  letter-spacing: var(--odl-tracking-tight);
}

::selection {
  background: var(--odl-selection);
}

:focus-visible {
  outline: 2px solid var(--odl-accent);
  outline-offset: 2px;
  border-radius: var(--odl-radius-xs);
}

/* Translucent, blurred navbar for a precise, layered feel */
.navbar {
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

/* Avoid making the mobile drawer's fixed panel position against the navbar. */
.navbar.navbar-sidebar--show {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.navbar__logo {
  height: 1.85rem;
}
.navbar__logo img {
  height: 100%;
}
.navbar__title {
  font-weight: 650;
  letter-spacing: var(--odl-tracking-tight);
}

/* Tabs/Prism code surfaces align to the system */
.theme-code-block,
pre[class*="language-"] {
  border: 1px solid var(--odl-code-border);
  border-radius: var(--odl-radius-md);
}

/* ---- 5. Brand motif: the solid "bar" ------------------------------------- */
/* The signature OpenDAL bar — a sharp solid rectangle used as a structural
   marker, divider and emphasis throughout the system. */
.odl-bar {
  display: inline-block;
  width: 2.25rem;
  height: 0.5rem;
  background: var(--odl-bar);
  border-radius: 0;
}

/* Eyebrow / kicker label: monospace, uppercase, led by a small accent bar */
.odl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--odl-space-3);
  font-family: var(--odl-font-mono);
  font-size: var(--odl-text-xs);
  font-weight: 500;
  letter-spacing: var(--odl-tracking-label);
  text-transform: uppercase;
  color: var(--odl-fg-muted);
}
.odl-eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 0.5rem;
  background: var(--odl-accent);
  flex: none;
}

/* Shared layout helpers used by landing sections */
.odl-container {
  width: 100%;
  max-width: var(--odl-container);
  margin-inline: auto;
  padding-inline: var(--odl-gutter);
}

/* Faint blueprint grid — engineering texture for select surfaces */
.odl-grid-bg {
  background-image: linear-gradient(
      var(--odl-grid-line) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, var(--odl-grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Tabular figures for any numeric/metric display */
.odl-tabular {
  font-family: var(--odl-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- 6. Header icons (GitHub / Discord) ---------------------------------- */
.header-github-link:hover,
.header-discord-link:hover {
  opacity: 0.6;
}

.header-github-link::before {
  content: "";
  width: 22px;
  height: 22px;
  display: flex;
  background-color: var(--odl-fg-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.header-discord-link::before {
  content: "";
  width: 22px;
  height: 22px;
  display: flex;
  background-color: var(--odl-fg-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* ---- 7. Footer ----------------------------------------------------------- */
.footer {
  background-color: var(--odl-bg-subtle);
  border-top: 1px solid var(--odl-border);
}
.footer__copyright {
  font-size: 0.75em;
  color: var(--odl-fg-subtle);
  margin-top: var(--odl-space-4);
}
.footer__logo {
  margin-top: unset;
  max-width: 280px;
}
[data-theme="dark"] .footer__logo {
  filter: brightness(0) invert(1) opacity(0.7);
}

/* ---- 7b. Docs sidebar section label -------------------------------------- */
/* A divider + eyebrow label that separates the concept docs from the
   per-language guides in the docs sidebar. */
.sidebar-section-label {
  margin: var(--odl-space-4, 1rem) 0 var(--odl-space-1, 0.25rem);
  padding: var(--odl-space-3, 0.75rem) 0.75rem 0;
  border-top: 1px solid var(--ifm-toc-border-color);
  font-family: var(--odl-font-mono);
  font-size: var(--odl-text-xs);
  font-weight: 600;
  letter-spacing: var(--odl-tracking-label);
  text-transform: uppercase;
  color: var(--odl-fg-muted);
}

/* ---- 7c. Language logos in the docs sidebar ------------------------------ */
/* Each per-language guide category carries a sidebar-lang-<key> class (set in
   docs/sidebars.js); show the matching brand logo before its label. The `>`
   chain targets only the category's own title, never its child pages. */
.sidebar-lang > .menu__list-item-collapsible > .menu__link::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.55em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -0.18em;
}
.sidebar-lang-rust > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/rust.svg); }
.sidebar-lang-c > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/c.svg); }
.sidebar-lang-cpp > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/cpp.svg); }
.sidebar-lang-d > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/d.svg); }
.sidebar-lang-dart > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/dart.svg); }
.sidebar-lang-dotnet > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/dotnet.svg); }
.sidebar-lang-go > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/go.svg); }
.sidebar-lang-haskell > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/haskell.svg); }
.sidebar-lang-java > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/java.svg); }
.sidebar-lang-lua > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/lua.svg); }
.sidebar-lang-nodejs > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/nodejs.svg); }
.sidebar-lang-ocaml > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/ocaml.svg); }
.sidebar-lang-php > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/php.svg); }
.sidebar-lang-python > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/python.svg); }
.sidebar-lang-ruby > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/ruby.svg); }
.sidebar-lang-swift > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/swift.svg); }
.sidebar-lang-zig > .menu__list-item-collapsible > .menu__link::before { background-image: url(/img/bindings/zig.svg); }

/* ---- 8. Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}