:root {
    --info-border-color: #2196F3;
    --info-bg-color: #f0f7ff;
    --info-fg-color: #1a7ab5;
}

.ayu, .coal, .navy {
    --info-border-color: #2196F3;
    --info-bg-color: #14202e;
    --info-fg-color: #a6d5f7;
}

@media (prefers-color-scheme: dark) {
    html:not(.js) {
        --info-border-color: #2196F3;
        --info-bg-color: #14202e;
        --info-fg-color: #a6d5f7;
    }
}

/* Add custom CSS rules here */

.info {
  position: relative;
  margin: 20px;
  padding: 0 20px;
  border-inline-start: 2px solid var(--info-border-color);
}

.info:before {
    position: absolute;
    width: 3rem;
    height: 3rem;
    margin-inline-start: calc(-1.5rem - 21px);
    content: "ⓘ";
    text-align: center;
    background-color: var(--bg);
    color: var(--info-border-color);
    font-weight: bold;
    font-size: 2rem;
}

/* Hypergraph container styles */
.hypergraph-container {
    margin: 1em 0;
    padding: 1em;
    background: var(--quote-bg);
    border-radius: 4px;
    overflow: hidden;
}

.hypergraph-error {
    padding: 1em;
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef5350;
    border-radius: 4px;
}

.ayu .hypergraph-error,
.coal .hypergraph-error,
.navy .hypergraph-error {
    background: #3a1616;
    color: #ff6b6b;
    border-color: #8b3030;
}

/* Definition links: inherit text color, blend with surrounding text */
.katex a[href*="#defn-"],
a.defn-ref {
    color: inherit;
    text-decoration: none;
}

/* Definition link targets: highlight when navigated to */
span[id^="defn-"]:target {
    background-color: rgba(255, 230, 0, 0.3);
    outline: 2px solid rgba(255, 200, 0, 0.6);
    border-radius: 2px;
}

.ayu span[id^="defn-"]:target,
.coal span[id^="defn-"]:target,
.navy span[id^="defn-"]:target {
    background-color: rgba(255, 230, 0, 0.15);
    outline: 2px solid rgba(255, 200, 0, 0.4);
}

/* Hide the JSON data once rendered */
.hypergraph-container[data-rendered] .hypergraph-data {
    display: none;
}