:root {
        --background-primary: #1e1e1e;
        --text-normal: #dcddde;
        --text-muted: #999;
        --text-faint: #666;
        --interactive-accent: #4e78e4;
        --background-secondary: #2a2a2a;
        --background-modifier-border: #444;
        --background-modifier-hover: #333;
        --highlight-bg: rgba(233, 172, 39, 0.4);
        --code-background: #242424;
        --tag-background: #2c2935;

        --heading-h1: #e0e0e0; /* Bright White */
        --heading-h2: #EBEBEB; /* Off-White / Silver */
        --heading-h3: #8ab4f8; /* Light Blue */
        --heading-h4: #c58af9; /* Purple */
        --heading-h5: #C3F87A; /* Energetic Yellow-Green */
        --heading-h6: #74C7A3; /* Muted Emerald Green */
        
    }

    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        background-color: var(--background-primary);
        color: var(--text-normal);
        line-height: 1.6;
        margin: 0;
        padding: 2rem 1rem;
    }

    main {
        max-width: 750px;
        margin: 0 auto;
    }


    h1 { 
        font-size: 2.2em; 
        color: var(--heading-h1);
    }
    h2 { 
        font-size: 1.8em; 
        color: var(--heading-h2);
    }
    h3 { 
        font-size: 1.5em; 
        color: var(--heading-h3);
    }

    h4 { 
        font-size: 1.25em; 
        color: var(--heading-h4);
    }
    h5 { 
        font-size: 1.1em; 
        color: var(--heading-h5);
    }
    h6 { 
        font-size: 1em; 
        color: var(--heading-h6);
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: 600;
        margin-top: 2em;
        margin-bottom: 0.8em;
        border-bottom: 1px solid var(--background-modifier-border);
        padding-bottom: 0.3em;
    }


    a {
        color: var(--interactive-accent);
        text-decoration: none;
    }
    a:hover { text-decoration: underline; }
    

    .broken-wikilink {
        color: #cc8686;
        text-decoration: none;
        border-bottom: 1px dotted #cc8686;
        cursor: help;
    }

    strong { font-weight: 600; }
    mark, ::selection {
        background-color: var(--highlight-bg);
        color: var(--text-normal);
        padding: 0.1em 0.2em;
        border-radius: 3px;
    }


    blockquote {
        margin: 1.5em 0;
        padding: 0.5em 1em;
        border-left: 4px solid var(--background-modifier-border);
        color: var(--text-muted);
        background-color: var(--background-secondary);
        border-radius: 4px;
    }
    blockquote p { margin: 0.5em 0; }


    .code-container {
        position: relative;
        margin: 1.5em 0;
    }

    pre[class*="language-"] {
        padding: 1em;
        margin: 0;
        overflow: auto;
        border-radius: 6px;
        border: 1px solid var(--background-modifier-border);
        background: var(--code-background);
    }
    :not(pre) > code[class*="language-"], pre[class*="language-"] {
        background: var(--code-background);
    }
    code {
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
        background-color: var(--code-background);
        padding: 0.2em 0.4em;
        font-size: 0.9em;
        border-radius: 3px;
    }


    .copy-code-button {
        position: absolute;
        top: 0.3em;
        right: 0.3em;
        background-color: var(--background-secondary);
        border: 1px solid var(--background-modifier-border);
        border-radius: 6px;
        padding: 6px 8px;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
        color: var(--text-muted);
        line-height: 0;
    }

    .code-container:hover .copy-code-button {
        opacity: 1;
        visibility: visible;
    }
    
    .copy-code-button:hover {
        background-color: var(--background-modifier-hover);
        color: var(--text-normal);
    }
    
    .copy-code-button.copied {
        background-color: var(--interactive-accent);
        color: white;
        border-color: var(--interactive-accent);
    }


    ul, ol {
        padding-left: 2em;
        position: relative;
    }
    ul {
        list-style: none;
    }
    ul > li::before {
        content: '';
        position: absolute;
        left: -1em;
        top: 0.6em;
        width: 6px;
        height: 6px;
        background-color: var(--text-faint);
        border-radius: 50%;
        transition: background-color 0.2s;
    }
    ul > li:hover::before {
        background-color: var(--text-normal);
    }
    li {
        margin-bottom: 0.5em;
        position: relative;
    }

    ul::before, ol::before {
        content: '';
        position: absolute;
        top: 0;
        left: 5px;
        bottom: 0;
        width: 1px;
        background-color: var(--background-modifier-border);
    }
    ul ul, ol ol, ul ol, ol ul {
            margin-top: 0.5em;
    }



    .task-list-item { 
        list-style-type: none;
        display: flex;
        align-items: center;
    }
    ul.task-list { padding-left: 0; }
    .task-list-item input[type="checkbox"] {
        margin-right: 0.7em;
        width: 1.2em;
        height: 1.2em;
    }
    .task-list-item input[type="checkbox"]:checked + span {
        text-decoration: line-through;
        color: var(--text-muted);
    }

    .task-list-item::before {
        display: none;
    }
    ul.task-list::before {
        display: none;
    }


    hr {
        border: none;
        border-top: 2px solid var(--background-modifier-border);
        margin: 3em 0;
    }
    

    table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.5em 0;
    }
    th, td {
        border: 1px solid var(--background-modifier-border);
        padding: 0.8em;
    }
    th {
        background-color: var(--background-secondary);
        font-weight: 600;
    }
    tr:nth-child(even) {
        background-color: rgba(255, 255, 255, 0.03);
    }


    .footnotes {
        color: var(--text-muted);
        font-size: 0.9em;
        margin-top: 3em;
        border-top: 1px solid var(--background-modifier-border);
    }
    .footnotes ol { padding-left: 1.5em; }


    .callout {
        border-radius: 8px;
        border-left-width: 5px;
        margin: 1.5em 0;
        overflow: hidden;
    }
    .callout .callout-title {
        padding: 12px 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .callout .callout-title .callout-icon {
        width: 20px;
        height: 20px;
    }
    .callout .callout-content {
        padding: 0 16px 12px;
    }
    .callout .callout-content > :first-child { margin-top: 0; }
    .callout .callout-content > :last-child { margin-bottom: 0; }
    
    .callout[data-callout="note"] { border-color: #4588F3; background-color: rgba(69, 136, 243, 0.1); }
    .callout[data-callout="note"] .callout-title { color: #4588F3; }
    .callout[data-callout="abstract"] { border-color: #00B4C8; background-color: rgba(0, 180, 200, 0.1); }
    .callout[data-callout="abstract"] .callout-title { color: #00B4C8; }
    .callout[data-callout="info"] { border-color: #00B4C8; background-color: rgba(0, 180, 200, 0.1); }
    .callout[data-callout="info"] .callout-title { color: #00B4C8; }
    .callout[data-callout="todo"] { border-color: #4588F3; background-color: rgba(69, 136, 243, 0.1); }
    .callout[data-callout="todo"] .callout-title { color: #4588F3; }
    .callout[data-callout="tip"] { border-color: #00C853; background-color: rgba(0, 200, 83, 0.1); }
    .callout[data-callout="tip"] .callout-title { color: #00C853; }
    .callout[data-callout="success"] { border-color: #00C853; background-color: rgba(0, 200, 83, 0.1); }
    .callout[data-callout="success"] .callout-title { color: #00C853; }
    .callout[data-callout="question"] { border-color: #FF9100; background-color: rgba(255, 145, 0, 0.1); }
    .callout[data-callout="question"] .callout-title { color: #FF9100; }
    .callout[data-callout="warning"] { border-color: #FF9100; background-color: rgba(255, 145, 0, 0.1); }
    .callout[data-callout="warning"] .callout-title { color: #FF9100; }
    .callout[data-callout="failure"] { border-color: #FF1744; background-color: rgba(255, 23, 68, 0.1); }
    .callout[data-callout="failure"] .callout-title { color: #FF1744; }
    .callout[data-callout="danger"] { border-color: #FF1744; background-color: rgba(255, 23, 68, 0.1); }
    .callout[data-callout="danger"] .callout-title { color: #FF1744; }
    .callout[data-callout="bug"] { border-color: #FF1744; background-color: rgba(255, 23, 68, 0.1); }
    .callout[data-callout="bug"] .callout-title { color: #FF1744; }
    .callout[data-callout="example"] { border-color: #7C4DFF; background-color: rgba(124, 77, 255, 0.1); }
    .callout[data-callout="example"] .callout-title { color: #7C4DFF; }
    .callout[data-callout="quote"] { border-color: #9E9E9E; background-color: rgba(158, 158, 158, 0.1); }
    .callout[data-callout="quote"] .callout-title { color: #9E9E9E; }

    a.tag {
        background-color: var(--tag-background);
        color: var(--text-muted);
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 0.85em;
        font-weight: 500;
        text-decoration: none;
        margin: 0 2px;
        display: inline-block;
    }
    a.tag:hover {
        background-color: var(--interactive-accent);
        color: white;
    }