body {
    font-family: 'Manrope', sans-serif;
    background: #fff;
    color: #1a1c1c;
    transition: background 0.3s, color 0.3s;
}
html.dark body { background: #0a0a0a; color: #fff; }
html.dark .bg-surface { background-color: #0a0a0a; }
html.dark .text-on-surface { color: #fff; }
html.dark .text-on-surface-variant { color: #ccc; }
html.dark .border-outline-variant { border-color: #333; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.veloq-metallic {
    display: inline-block;
    color: transparent !important;
    background: linear-gradient(112deg, #050607 0%, #2a3138 17%, #090b0d 34%, #e1e5e8 49%, #171b20 61%, #4b535b 79%, #060708 100%);
    background-size: 220% 100%;
    background-position: var(--veloq-shimmer-x, 0%) 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.22);
    transition: background-position 90ms linear, filter 300ms ease;
}
.veloq-metallic:hover { background-position: 100% 0; filter: brightness(1.08); }
html.dark .veloq-metallic {
    background-image: linear-gradient(112deg, #e9edf0 0%, #ffffff 20%, #9ba4ad 42%, #ffffff 57%, #b7c0c8 76%, #f9fbfc 100%);
    text-shadow: 0 1px 11px rgba(255, 225, 237, 0.42);
    filter: brightness(1.12);
}
@media (prefers-reduced-motion: reduce) {
    .veloq-metallic { transition: filter 300ms ease; }
}

/* Shared translucent navigation: the page remains visible beneath it while
   the blur keeps controls legible over changing content. */
.site-header {
    background: rgba(255, 255, 255, 0.72) !important;
    border-bottom-color: rgba(20, 24, 32, 0.12) !important;
    -webkit-backdrop-filter: saturate(145%) blur(16px);
    backdrop-filter: saturate(145%) blur(16px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.88), 0 10px 30px rgba(20, 24, 32, 0.08);
}
.site-header a:not(.veloq-metallic),
.site-header button,
.site-header span {
    color: #111318 !important;
}
.site-header a:not(.veloq-metallic):hover,
.site-header button:hover,
.site-header span:hover {
    color: #000000 !important;
}

/* Keep the shared navigation readable when a page switches to night mode. */
html.dark .site-header {
    background: rgba(23, 15, 20, 0.78) !important;
    border-bottom-color: rgba(255, 230, 239, 0.16) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 30px rgba(0, 0, 0, 0.24);
}

html.dark .site-header a:not(.veloq-metallic),
html.dark .site-header button,
html.dark .site-header span {
    color: #fff4f8 !important;
}

html.dark .site-header a:not(.veloq-metallic):hover,
html.dark .site-header button:hover,
html.dark .site-header span:hover {
    color: #ffb6cd !important;
}