@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap");

:root {
    --black: #261230;
    --white: #ffffff;
    --radiate: #d7ff64;
    --flare: #6340ac;
    --rock: #78876e;
    --galaxy: #261230;
    --space: #30173d;
    --comet: #6f5d6f;
    --cosmic: #de5fe9;
    --sun: #ffac2f;
    --electron: #46ebe1;
    --aurora: #46eb74;
    --constellation: #5f6de9;
    --neutron: #cff3cf;
    --proton: #f6afbc;
    --nebula: #cdcbfb;
    --supernova: #f1aff6;
    --starlight: #f4f4f1;
    --lunar: #fbf2fc;
    --asteroid: #e3cee3;
    --crater: #f0dfdf;
    --md-default-bg-color: var(--lunar);
    --md-default-fg-color: var(--galaxy);
    --md-primary-fg-color: var(--aurora);
    --md-accent-fg-color: var(--radiate);

    --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1 {stroke-width: 0px;}</style></defs><path id="gradient_icon" class="cls-1" d="m21.16.94H2.84c-1.05,0-1.9.85-1.9,1.9v18.32c0,1.05.85,1.9,1.9,1.9h18.32c1.05,0,1.9-.85,1.9-1.9V2.84c0-1.05-.85-1.9-1.9-1.9Zm1.4,18.1H1.44v-.19h21.13v.19Zm0-3.09H1.44v-.3h21.13v.3Zm0-3.1H1.44v-.5h21.13v.5Zm0-3H1.44v-.9h21.13v.9Zm0-2.9H1.44v-1.4h21.13v1.4Zm0-2.9H1.44v-1.21c0-.25.06-.48.18-.69h20.76c.12.21.18.44.18.69v1.21Z" /></svg>');
    @media (prefers-color-scheme: dark) {
        :root {
            --md-default-bg-color: var(--galaxy);
            --md-default-fg-color: var(--white);
            --md-primary-fg-color: var(--aurora);
            --md-accent-fg-color: var(--radiate);
        }
    }
}

[data-md-color-scheme="astral-dark"] table {
    border-collapse: collapse;
    border-spacing: 0;
    color: #eeeeee;
}

table.params {
    border-collapse: collapse;
    border-spacing: 0;
    color: #eeeeee;
    width: 100%;
    font-family: "Inter", sans-serif;
}

[data-md-color-scheme="astral-dark"] th {
    color: #2d183b;
    background: #cccccc;
    font-size: 2.25em;
    text-align: left;
    padding: 10px 30px;
}

[data-md-color-scheme="astral-dark"] table.params td {
    color: #cccccc;
    background: #2d183b;
    font-size: 2em;
    font-family: "Inter", sans-serif;
    text-align: left;
    width: 30%;
    padding: 10px 30px;
}

table.params th:nth-child(even) {
    width: 30%;
}

table.params th:nth-child(even) {
    width: 70%;
}

[data-md-color-scheme="astral-dark"] tr:nth-child(even) {
    background: #321744;
}

.md-typeset .admonition.note,
.md-typeset details.note {
    border-color: #af00ff;
}

.md-typeset .note>.admonition-title,
.md-typeset .note>summary {
    background-color: #8300da3b;
}

.md-typeset .note>.admonition-title::before,
.md-typeset .note>summary::before {
    background-color: #5f00ff;
    -webkit-mask-image: var(--md-admonition-icon--note);
    mask-image: var(--md-admonition-icon--note);
}

[data-md-color-scheme="astral-light"] {
    /* Base colors */
    --md-default-bg-color: #ffffff;
    --md-default-bg-color--dark: #f6f7fb;
    --md-default-fg-color: #2d183b;
    /* deep purple text */
    --md-default-fg-color--light: #443057;
    --md-default-fg-color--lighter: #6a5780;

    /* Brand accents */
    --md-primary-fg-color: var(--galaxy);
    --md-primary-bg-color: #ffffff;
    --md-accent-fg-color: var(--cosmic);
    --md-typeset-a-color: var(--flare);

    /* Body and code */
    --md-typeset-color: #2d183b;
    --md-typeset-mark-color: #fff2a8;

    --md-code-fg-color: #2d183b;
    --md-code-bg-color: #f6f8fa;
    /* neutral light code background */

    /* Code highlight tokens (ensure good contrast in light mode) */
    --md-code-hl-comment-color: #6e7781;
    --md-code-hl-punctuation-color: #6e7781;
    --md-code-hl-generic-color: #8e63c7;
    --md-code-hl-variable-color: #1f2328;
    --md-code-hl-string-color: #0a7b83;
    /* teal-ish */
    --md-code-hl-keyword-color: #7c3aed;
    /* purple */
    --md-code-hl-operator-color: #7c3aed;
    --md-code-hl-number-color: #b45309;
    /* warm brown */
    --md-code-hl-special-color: #b45309;
    --md-code-hl-function-color: #14532d;
    /* green */
    --md-code-hl-constant-color: #a21caf;
    /* magenta */
    --md-code-hl-name-color: #111827;
    /* headings/idents */

    /* Tables */
    --md-typeset-table-color: rgba(0, 0, 0, 0.08);
    --md-typeset-table-color--light: rgba(0, 0, 0, 0.035);
}

/* Light-only adjustments for tables and stripes */
[data-md-color-scheme="astral-light"] table {
    color: #2d183b;
}

[data-md-color-scheme="astral-light"] tr:nth-child(even) {
    background: #f5f2fb;
    /* very light lilac */
}

[data-md-color-scheme="astral-light"] table.params td {
    color: #2d183b;
    background: #f7f7f9;
}

[data-md-color-scheme="astral-dark"] {
    --md-default-bg-color: var(--galaxy);
    --md-default-fg-color: var(--white);
    --md-default-fg-color--light: var(--white);
    --md-default-fg-color--lighter: var(--white);
    --md-primary-fg-color: var(--space);
    --md-primary-bg-color: var(--white);
    --md-accent-fg-color: var(--radiate);

    --md-typeset-color: var(--white);
    --md-typeset-a-color: var(--radiate);
    --md-typeset-mark-color: var(--sun);

    --md-code-fg-color: var(--white);
    --md-code-bg-color: var(--space);

    --md-code-hl-comment-color: var(--asteroid);
    --md-code-hl-punctuation-color: var(--asteroid);
    --md-code-hl-generic-color: var(--supernova);
    --md-code-hl-variable-color: var(--starlight);
    --md-code-hl-string-color: var(--radiate);
    --md-code-hl-keyword-color: var(--supernova);
    --md-code-hl-operator-color: var(--supernova);
    --md-code-hl-number-color: var(--electron);
    --md-code-hl-special-color: var(--electron);
    --md-code-hl-function-color: var(--neutron);
    --md-code-hl-constant-color: var(--radiate);
    --md-code-hl-name-color: var(--md-code-fg-color);

    --md-typeset-del-color: hsla(6, 90%, 60%, 0.15);
    --md-typeset-ins-color: hsla(150, 90%, 44%, 0.15);

    --md-typeset-table-color: hsla(0, 0%, 100%, 0.12);
    --md-typeset-table-color--light: hsla(0, 0%, 100%, 0.035);
}

[data-md-color-scheme="astral-light"] img[src$="#only-dark"],
[data-md-color-scheme="astral-light"] img[src$="#gh-dark-mode-only"] {
    display: none;
    /* Hide dark images in light mode */
}

[data-md-color-scheme="astral-light"] img[src$="#only-light"],
[data-md-color-scheme="astral-light"] img[src$="#gh-light-mode-only"] {
    display: inline;
    /* Show light images in light mode */
}

[data-md-color-scheme="astral-dark"] img[src$="#only-light"],
[data-md-color-scheme="astral-dark"] img[src$="#gh-light-mode-only"] {
    display: none;
    /* Hide light images in dark mode */
}

[data-md-color-scheme="astral-dark"] img[src$="#only-dark"],
[data-md-color-scheme="astral-dark"] img[src$="#gh-dark-mode-only"] {
    display: inline;
    /* Show dark images in dark mode */
}

/* See: https://github.com/squidfunk/mkdocs-material/issues/175#issuecomment-616694465 */
.md-typeset__table {
    min-width: 100%;
}

.md-typeset table:not([class]) {
    display: table;
}

.invis {
    color: #23132e;
}

.grey93 {
    color: #23132e;
    background: #eee;
    padding: 5px;
    border-radius: 5px;
}

.salmon1 {
    color: #23132e;
    background: #ff875f;
    padding: 5px;
    border-radius: 5px;
}

.spring_green1 {
    color: #23132e;
    background: #00ff87;
    padding: 5px;
    border-radius: 5px;
}

.off_white#eee {
    color: #23132e;
    background: #eeeeee;
    padding: 5px;
    border-radius: 5px;
}

.violet {
    color: #eeeeee;
    background: #af00ff;
    padding: 5px;
    border-radius: 5px;
}

.purple {
    color: #ffffff;
    background: #5f00ff;
    padding: 5px;
    border-radius: 5px;
}

/* Toast for copy-to-clipboard */
.rg-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    background: var(--md-code-bg-color, #2e2e2e);
    color: var(--md-typeset-color, #ffffff);
    padding: 0.6rem 1rem;
    border-radius: 6px;
    box-shadow: var(--md-shadow-z2, 0 4px 12px rgba(0, 0, 0, .3));
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 9999;
    font-weight: 600;
}

.rg-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Let the theme colours drive the page background */
html,
body {
    background: var(--md-default-bg-color);
}

/* ---- Animated rainbow accent ------------------------------------------ */
[data-md-color-scheme="astral-light"] {
    /* darken the spectrum so it stays readable on white */
    --rg-keep: 68%;
}

[data-md-color-scheme="astral-dark"] {
    --rg-keep: 100%;
}

[data-md-color-scheme] {
    --rg-rainbow: linear-gradient(90deg,
            color-mix(in srgb, #FF0000 var(--rg-keep), #000),
            color-mix(in srgb, #FF5500 var(--rg-keep), #000),
            color-mix(in srgb, #FF9900 var(--rg-keep), #000),
            color-mix(in srgb, #FFCC00 var(--rg-keep), #000),
            color-mix(in srgb, #FFFF00 var(--rg-keep), #000),
            color-mix(in srgb, #AAFF00 var(--rg-keep), #000),
            color-mix(in srgb, #00FF00 var(--rg-keep), #000),
            color-mix(in srgb, #00FF99 var(--rg-keep), #000),
            color-mix(in srgb, #00FFFF var(--rg-keep), #000),
            color-mix(in srgb, #00CCFF var(--rg-keep), #000),
            color-mix(in srgb, #0099FF var(--rg-keep), #000),
            color-mix(in srgb, #5066FF var(--rg-keep), #000),
            color-mix(in srgb, #8055FF var(--rg-keep), #000),
            color-mix(in srgb, #B033FF var(--rg-keep), #000),
            color-mix(in srgb, #FF00FF var(--rg-keep), #000),
            color-mix(in srgb, #FF00AA var(--rg-keep), #000),
            color-mix(in srgb, #FF0055 var(--rg-keep), #000),
            color-mix(in srgb, #FF0000 var(--rg-keep), #000));
}

@keyframes rg-rainbow-shift {
    to {
        background-position: -200% 0;
    }
}

/* Gradient-filled text for accent elements */
.md-typeset a:not(.headerlink):not(.md-button):not(.md-annotation__index),
.md-nav__link--active,
.md-nav__item--active>.md-nav__link,
.md-nav__link:is(:hover, :focus),
.md-header__title .md-ellipsis,
.md-typeset .headerlink:is(:hover, :focus) {
    background-image: var(--rg-rainbow);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: rg-rainbow-shift 8s linear infinite;
}

/* Gradient rule under headings and a gradient scrollbar thumb / selection */
.md-typeset h1::after {
    content: "";
    display: block;
    height: 3px;
    margin-top: .4em;
    border-radius: 2px;
    background: var(--rg-rainbow);
    background-size: 200% 100%;
    animation: rg-rainbow-shift 8s linear infinite;
}

.md-search__form:focus-within {
    outline: 2px solid transparent;
    border-radius: .1rem;
    background-image: linear-gradient(var(--md-default-bg-color), var(--md-default-bg-color)), var(--rg-rainbow);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 2px solid transparent;
}

@media (prefers-reduced-motion: reduce) {

    .md-typeset a,
    .md-nav__link,
    .md-header__title .md-ellipsis,
    .md-typeset h1::after {
        animation: none;
    }
}

/* Inline code inside a link: plain text normally, rainbow on hover.
   The code element paints its own background and inherits the link's
   transparent text fill, which hid the text. Keep the normal text color, and
   on hover fade the fill to transparent so a rainbow layer clipped to the text
   shows through while it animates. */
.md-typeset a:not(.headerlink):not(.md-button) > code {
    background-image: var(--rg-rainbow),
        linear-gradient(var(--md-code-bg-color), var(--md-code-bg-color));
    background-size: 200% 100%, auto;
    background-clip: text, border-box;
    -webkit-background-clip: text, border-box;
    -webkit-text-fill-color: var(--md-typeset-color);
    color: var(--md-typeset-color);
    animation: rg-rainbow-shift-code 4s linear infinite paused;
    transition: -webkit-text-fill-color 0.35s ease;
}

.md-typeset a:not(.headerlink):not(.md-button):is(:hover, :focus-visible) > code {
    -webkit-text-fill-color: transparent;
    animation-play-state: running;
}

@keyframes rg-rainbow-shift-code {
    to {
        background-position: -200% 0, 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .md-typeset a > code {
        animation: none;
        transition: none;
    }
}
