:root {
    --accent-color: #c2410c;
}

/* Berkeley Mono font face - Developer version */
@font-face {
    font-family: 'Berkeley Mono';
    src: url('/fonts/BerkeleyMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url('/fonts/BerkeleyMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url('/fonts/BerkeleyMono-Oblique.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url('/fonts/BerkeleyMono-Bold-Oblique.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}

/* Use Berkeley Mono as default body font */
body {
    font-family: 'Berkeley Mono', monospace;
    font-size: 18px;
}

/* Text selection colors - light theme */
::selection {
    background-color: #b8d4b8;
    color: #1a472a;
}

::-moz-selection {
    background-color: #b8d4b8;
    color: #1a472a;
}

/* Ensure VT323 for h1, h2, and h3 */
h1, h2, h3 {
    font-family: 'VT323', monospace !important;
}

/* Keep IBM Plex Mono for grid and logo only */
#grid-animation-container-top, #grid-animation-container-top *,
#site-logo, .grid {
    font-family: 'IBM Plex Mono', monospace !important;
}


body {
    color: #2a2a2a;
}

#content p,
#content li,
#content {
    line-height: 1.3 !important;
}

a {
    color: #166534 !important;
}

h1 {
    color: #c2410c;
    font-family: 'VT323', monospace !important;
    font-size: 2.5em;
    font-weight: bold;
    margin-top: 0.8em;
    margin-bottom: 0.4em;
    padding-left: 0 !important;
    line-height: 1.2;
}

h2 {
    color: #c2410c;
    font-family: 'VT323', monospace !important;
    font-size: 2.0em;
    font-weight: bold;
    margin-top: 0.6em;
    margin-bottom: 0.3em;
    padding-left: 0 !important;
    line-height: 1.2;
}

h1::before {
    color: #004c4c;
}

h1::after {
    content: " ::";
    color: #004c4c;
}

h2::before {
    content: ":: ";
    color: #004c4c;
}

h3 {
    color: #c2410c;
    font-family: 'VT323', monospace !important;
    font-size: 1.6em;
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    padding-left: 0 !important;
}

/* Indent content following h3 */
h3 + p,
h3 + ul,
h3 + ol,
h3 + pre,
h3 + .highlight,
h3 ~ p,
h3 ~ ul,
h3 ~ ol,
h3 ~ pre,
h3 ~ .highlight {
    padding-left: 3em !important;
}

/* Reset indentation when hitting next h1, h2, or h3 */
h1 ~ p,
h1 ~ ul,
h1 ~ ol,
h1 ~ pre,
h1 ~ .highlight,
h2 ~ p,
h2 ~ ul,
h2 ~ ol,
h2 ~ pre,
h2 ~ .highlight {
    padding-left: 0 !important;
}

/* Re-apply after h3 that comes after h1 or h2 */
h1 ~ h3 ~ p,
h1 ~ h3 ~ ul,
h1 ~ h3 ~ ol,
h1 ~ h3 ~ pre,
h1 ~ h3 ~ .highlight,
h2 ~ h3 ~ p,
h2 ~ h3 ~ ul,
h2 ~ h3 ~ ol,
h2 ~ h3 ~ pre,
h2 ~ h3 ~ .highlight {
    padding-left: 3em !important;
}

/* h3 sections: indent the entire wrapper */
#content-inner .h3-section {
    padding-left: 3em !important;
    margin-left: 0;
}

/* Code blocks spacing */
.highlight {
    margin-top: 1em !important;
    margin-bottom: 1.2em !important;
    position: relative;
}

pre {
    margin-top: 1em !important;
    margin-bottom: 1.2em !important;
    position: relative;
    overflow-x: auto;
    white-space: pre;
}

pre code {
    font-family: 'Berkeley Mono', monospace;
    font-weight: normal;
    white-space: pre;
}

/* Ensure empty lines in code blocks are displayed */
.highlight .chroma span.line {
    display: block;
}

.highlight .chroma span.line:empty::before {
    content: '\200b'; /* zero-width space to maintain line height */
}

/* Ensure EXACT same line height for both line numbers and code */
.highlight .lntable .lntd pre,
.highlight .lntable .lntd pre code,
.highlight .lntable .lnt,
.highlight .lntable .ln,
.highlight .chroma span.line,
.highlight .chroma span.line span {
    line-height: 1.5 !important;
    font-size: inherit !important;
}

/* Fix line numbers table height */
.highlight .lntable {
    display: table;
    width: 100%;
}

.highlight .lntable .lntd {
    vertical-align: top;
}

.highlight .lntable .lntd:first-child {
    width: 1%;
    white-space: nowrap;
}

.highlight .lntable .lntd:last-child {
    width: 99%;
}

/* Hide empty lines at the end of code blocks */
.highlight .lntable .lntd pre {
    margin: 0;
    padding: 0;
}

.highlight .lntable .lntd:first-child pre {
    display: flex;
    flex-direction: column;
}

/* Remove extra spacing that creates phantom line numbers */
.highlight .lntable .lntd pre .lnt:empty,
.highlight .lntable .lntd pre .ln:empty {
    display: none;
}

/* Ensure line numbers column matches code height exactly */
.highlight .lntable tbody {
    vertical-align: top;
}

.highlight .lntable tbody tr {
    height: auto;
}

/* Copy button for code blocks */
.copy-code-button {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    color: #555;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}

.highlight:hover .copy-code-button,
pre:hover .copy-code-button {
    opacity: 1;
}

.copy-code-button:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
}

.copy-code-button:active {
    background: #e0e0e0;
}

.copy-code-button.copied {
    background: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

/* Dark theme copy button */
body.dark-theme .copy-code-button {
    background: rgba(40, 40, 40, 0.8);
    border-color: #504945;
    color: #ebdbb2;
}

body.dark-theme .copy-code-button:hover {
    background: rgba(60, 56, 54, 0.9);
    color: #fbf1c7;
}

body.dark-theme .copy-code-button:active {
    background: #3c3836;
}

body.dark-theme .copy-code-button.copied {
    background: #3c3836;
    border-color: #98971a;
    color: #b8bb26;
}

p {
    margin-bottom: 0.5em;
    line-height: 1.5 !important;
}

/* Hide narrow menu on wide viewports */
#narrow-menu {
    display: none;
}

/* Responsive layout for narrow viewports */
@media (max-width: 900px) {
    /* Hide both sidebars */
    #left-sidebar {
        display: none !important;
    }

    #sidebar {
        display: none !important;
    }

    /* Remove ALL margins and padding for full-width layout */
    * {
        box-sizing: border-box !important;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    #container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    #content {
        padding: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Single small padding only on content-inner */
    #content-inner {
        padding: 10px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Remove all nested padding and margins */
    #content-inner main,
    #content-inner .markdown-content,
    #content-inner article,
    #content-inner article > div {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Make all text content use full width */
    #content p,
    #content li,
    #content h1,
    #content h2,
    #content h3,
    #content ul,
    #content ol,
    #content div {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Remove h3 section indentation on mobile */
    #content-inner .h3-section {
        padding-left: 0 !important;
    }

    /* Code blocks should also be full width */
    .highlight,
    .highlight pre,
    pre {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Override any Bootstrap container padding */
    .container,
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make navigation full screen width on mobile */
    #content-nav-top {
        width: 100%;
        margin: 0;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box;
        position: relative;
    }

    /* Fix theme toggle icon positioning on mobile - move to bottom right corner */
    #theme-toggle-icon {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        top: auto !important;
        left: auto !important;
        z-index: 10000 !important;
        opacity: 0.7 !important;
        background: rgba(255, 255, 255, 0.9) !important;
        padding: 10px !important;
        border-radius: 50% !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.2s ease !important;
        /* Override parent positioning */
        transform: none !important;
        margin: 0 !important;
    }

    /* Hide the parent container that positions it absolutely */
    #content-nav-top div[style*="position: absolute"] {
        display: none !important;
    }

    #theme-toggle-icon:hover {
        opacity: 0.8 !important;
    }

    /* Dark theme styling for mobile theme toggle */
    body.dark-theme #mobile-theme-toggle {
        background: rgba(40, 40, 40, 0.9) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    }

    /* Ensure nav arrows have proper spacing */
    #nav-prev, #nav-next {
        flex: 1;
        max-width: 45%;
    }

    /* Footer should also be full width */
    .content-footer {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

}

/* Mobile layout - hide sidebars completely and remove padding */
@media (max-width: 768px) {
    #left-sidebar {
        display: none !important;
    }

    #sidebar {
        display: none !important;
    }

    /* Mobile: Make content-inner full width with minimal padding */
    #content-inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 10px !important;
    }

    /* Remove ALL margins and padding for full-width layout */
    * {
        box-sizing: border-box !important;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    #container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    #content {
        padding: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Single small padding only on content-inner */
    #content-inner {
        padding: 10px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Remove all nested padding and margins */
    #content-inner main,
    #content-inner .markdown-content,
    #content-inner article,
    #content-inner article > div {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Make all text content use full width */
    #content p,
    #content li,
    #content h1,
    #content h2,
    #content h3,
    #content ul,
    #content ol,
    #content div {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Remove h3 section indentation on mobile */
    #content-inner .h3-section {
        padding-left: 0 !important;
    }

    /* Code blocks - constrain to viewport and make scrollable within */
    .highlight,
    .highlight pre,
    pre {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Code block tables should not exceed viewport */
    .highlight .lntable,
    .highlight .lntable .lntd,
    .highlight .lntable .lntd pre {
        max-width: 100% !important;
        width: auto !important;
    }

    /* Disable fixed widths on code blocks */
    .highlight .lntable .lntd:last-child,
    .highlight .lntable .lntd:last-child pre {
        width: auto !important;
        max-width: 100% !important;
    }

    /* Disable 80-char line guide on mobile */
    .highlight .lntable .lntd:last-child::after {
        display: none !important;
    }

    /* Override any Bootstrap container padding */
    .container,
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make navigation sticky on mobile */
    #content-nav-top {
        position: sticky !important;
        top: 0 !important;
        width: 100%;
        margin: 0 0 10px 0 !important;
        padding: 10px !important;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.95) !important;
        z-index: 100 !important;
    }

    /* Dark theme sticky nav */
    body.dark-theme #content-nav-top {
        background: rgba(40, 40, 40, 0.95) !important;
    }

    /* Nav arrows - prevent wrapping and keep terminal style */
    #nav-prev,
    #nav-next {
        flex: 1;
        white-space: nowrap;
        overflow: visible;
        transition: color 0.1s ease, transform 0.1s ease;
        font-family: 'IBM Plex Mono', monospace;
    }

    #nav-prev {
        text-align: left;
        padding-right: 10px;
    }

    #nav-next {
        text-align: right;
        padding-left: 10px;
    }

    #nav-prev a,
    #nav-next a {
        text-decoration: none;
        border: none;
        background: none;
        outline: none;
        box-shadow: none;
        font-family: 'IBM Plex Mono', monospace;
        color: #7DCEA0 !important;
        cursor: default;
    }

    #nav-prev a:hover,
    #nav-next a:hover {
        color: inherit !important;
        text-decoration: none !important;
    }

    /* Terminal-style navigation - plain arrows without styling */
    .nav-arrow-plain {
        border: none !important;
        background: none !important;
        outline: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: inherit !important;
        font-weight: normal !important;
        color: inherit !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
        display: inline !important;
        font-family: 'IBM Plex Mono', monospace !important;
    }

    .nav-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: none;
        background: none;
        min-width: 0;
        flex: 1;
        font-family: 'IBM Plex Mono', monospace;
    }

    #nav-prev a {
        display: flex;
        align-items: center;
    }

    #nav-next a {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* Swipe feedback on nav items - now handled with inline styles */

    /* FORCE theme toggle to bottom-right corner on mobile only */
    #content-nav-top > div:has(#theme-toggle-icon) {
        display: none !important;
    }

    #theme-toggle-icon {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        top: auto !important;
        left: auto !important;
        z-index: 10000 !important;
        opacity: 0.7 !important;
        background: rgba(255, 255, 255, 0.9) !important;
        padding: 10px !important;
        border-radius: 50% !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.2s ease !important;
    }



    #theme-toggle-icon {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: 10000 !important;
        opacity: 0.7 !important;
        background: rgba(255, 255, 255, 0.9) !important;
        padding: 10px !important;
        border-radius: 50% !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.2s ease !important;
    }

    body.dark-theme #theme-toggle-icon {
        background: rgba(40, 40, 40, 0.9) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    }

    #theme-toggle-icon:active {
        transform: scale(0.95) !important;
    }

    #theme-toggle-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Footer should also be full width */
    .content-footer {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
}

/* Custom scrollbars for Chrome/WebKit - vertical */
#left-sidebar::-webkit-scrollbar,
#sidebar::-webkit-scrollbar,
#content::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

#left-sidebar::-webkit-scrollbar-track,
#sidebar::-webkit-scrollbar-track,
#content::-webkit-scrollbar-track {
    background: transparent;
}

#left-sidebar::-webkit-scrollbar-thumb,
#sidebar::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-thumb {
    background: #e8e8e8;
    border-radius: 2px;
}

#left-sidebar::-webkit-scrollbar-thumb:hover,
#sidebar::-webkit-scrollbar-thumb:hover,
#content::-webkit-scrollbar-thumb:hover {
    background: #d0d0d0;
}

/* Horizontal scrollbar for code blocks and pre elements */
pre::-webkit-scrollbar,
.highlight::-webkit-scrollbar {
    height: 6px;
}

pre::-webkit-scrollbar-track,
.highlight::-webkit-scrollbar-track {
    background: #f0f0f0;
}

pre::-webkit-scrollbar-thumb,
.highlight::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 3px;
}

pre::-webkit-scrollbar-thumb:hover,
.highlight::-webkit-scrollbar-thumb:hover {
    background: #909090;
}

/* ===== DARK THEME SCROLLBAR STYLING ===== */

/* Main content area scrollbars - dark theme */
body.dark-theme #left-sidebar::-webkit-scrollbar-thumb,
body.dark-theme #sidebar::-webkit-scrollbar-thumb,
body.dark-theme #content::-webkit-scrollbar-thumb {
    background: #504945;
}

body.dark-theme #left-sidebar::-webkit-scrollbar-thumb:hover,
body.dark-theme #sidebar::-webkit-scrollbar-thumb:hover,
body.dark-theme #content::-webkit-scrollbar-thumb:hover {
    background: #665c54;
}

/* Code block scrollbars - dark theme */
body.dark-theme pre::-webkit-scrollbar-track,
body.dark-theme .highlight::-webkit-scrollbar-track {
    background: #3c3836;
}

body.dark-theme pre::-webkit-scrollbar-thumb,
body.dark-theme .highlight::-webkit-scrollbar-thumb {
    background: #504945;
}

body.dark-theme pre::-webkit-scrollbar-thumb:hover,
body.dark-theme .highlight::-webkit-scrollbar-thumb:hover {
    background: #665c54;
}

/* Contents tab styling */
#contents h3 {
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Grid Animation Styles */
#grid-animation-container {
    touch-action: none;
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    height: 200px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    padding: 0 15px;
    z-index: 0;
    pointer-events: none;
    border-top: 1px solid #dee2e6;
}

#grid-resize-handle {
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    z-index: 10;
    pointer-events: auto;
}

#grid-animation-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
        #fff 0%,
        #fff 5%,
        transparent 25%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

body.dark-theme #grid-animation-container::before {
    background: linear-gradient(to bottom,
        #282828 0%,
        #282828 5%,
        transparent 25%,
        transparent 100%);
}

.grid {
    touch-action: none;
    display: grid !important;
    grid-template-rows: repeat(var(--rows, 12), 1fr) !important;
    grid-template-columns: repeat(var(--cols, 20), 1fr) !important;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    font-family: 'IBM Plex Mono', monospace;
    gap: 0.5px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.grid div {
    touch-action: none;
    padding: 0.5px;
    opacity: calc(var(--opacity) * 0.5);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    transition-property: opacity, rotate, filter;
    transition-duration: 0.8s, 0.4s, 0.6s;
    transition-timing-function: ease-in, ease-out, ease-out;
    scale: 1.2;
    filter: grayscale(1);
    color: hsl(var(--hue) 80% 50%);
    pointer-events: auto;
    cursor: default;
    position: relative;
    z-index: 5;
}

.grid div:hover {
    transition-property: opacity, rotate, filter;
    transition-duration: 0s;
    rotate: calc(var(--grade, 0) * 90deg);
    filter: grayscale(0) brightness(1.5);
    opacity: 1;
}

/* Mobile touch support */
.grid div[style*="--hover: 1"] {
    transition-property: opacity, rotate, filter;
    transition-duration: 0s;
    rotate: calc(var(--grade, 0) * 90deg);
    filter: grayscale(0) brightness(1.5);
    opacity: 1;
}

/* Dark theme support - Gruvbox */
body.dark-theme {
    background-color: #282828;
    color: #d5c4a1;
}

/* Text selection colors - dark theme */
body.dark-theme ::selection {
    background-color: #504945;
    color: #fbf1c7;
}

body.dark-theme ::-moz-selection {
    background-color: #504945;
    color: #fbf1c7;
}

body.dark-theme #left-sidebar,
body.dark-theme #content {
    background-color: #282828;
    color: #d5c4a1;
}

body.dark-theme #sidebar {
    background-color: #282828;
    color: #d5c4a1;
    border-color: #504945;
}

body.dark-theme h1 {
    color: #fbbf24;
}

body.dark-theme h1::before {
    color: #c2410c;
}

body.dark-theme #content h1::before {
    color: #c2410c;
}

body.dark-theme h1::after {
    content: " ::";
    color: #c2410c;
}

body.dark-theme h2 {
    color: #fbbf24;
}

body.dark-theme h2::before {
    color: #c2410c;
}

body.dark-theme h3 {
    color: #fbbf24;
}

body.dark-theme p,
body.dark-theme li {
    color: #ebdbb2;
}

body.dark-theme .grid div {
    opacity: calc(var(--opacity) + 0.2);
}

body.dark-theme .grid div:hover {
    opacity: 1;
}

body.dark-theme #left-sidebar,
body.dark-theme #sidebar,
body.dark-theme #content {
    border-color: #504945;
}



body.dark-theme a {
    color: #fb923c !important;
}

body.dark-theme a:hover {
    color: #fbbf24 !important;
}

body.dark-theme .category-link {
    color: #fb923c !important;
}

/* Dark theme highlight color overrides */
body.dark-theme #content h1 {
    color: #fbbf24 !important;
}

body.dark-theme #content h1 a {
    color: #fbbf24 !important;
}

body.dark-theme #left-sidebar ol.chapter li.chapter-item.expanded.active a {
    color: #fbbf24 !important;
}

body.dark-theme #left-sidebar ol.chapter a:hover {
    color: #fbbf24 !important;
}

body.dark-theme #left-sidebar nav#TableOfContents a:hover {
    color: #fbbf24 !important;
}

body.dark-theme #left-sidebar a:hover {
    color: #fbbf24 !important;
}

body.dark-theme #left-sidebar li.chapter-item.active a,
body.dark-theme #left-sidebar li.active a,
body.dark-theme #left-sidebar li.active a:link,
body.dark-theme #left-sidebar li.active a:visited,
body.dark-theme #left-sidebar li.active a:hover,
body.dark-theme #left-sidebar ol.chapter li.chapter-item.active a,
body.dark-theme #left-sidebar ol.chapter li.active a,
body.dark-theme #left-sidebar ol.section li.active a {
    color: #fbbf24 !important;
}

body.dark-theme #left-sidebar li.chapter-item.active {
    color: #fbbf24 !important;
}

body.dark-theme #sidebar li.active a,
body.dark-theme #sidebar li.active a:link,
body.dark-theme #sidebar li.active a:visited,
body.dark-theme #sidebar li.active a:hover {
    color: #fbbf24 !important;
}

body.dark-theme .active-tab,
body.dark-theme .active-tab:link,
body.dark-theme .active-tab:visited,
body.dark-theme .active-tab:hover {
    color: #fbbf24 !important;
}

body.dark-theme code.inline-code {
    background-color: #282828;
    border-color: #504945;
    color: #ebdbb2;
}

body.dark-theme .highlight pre {
    background-color: #282828 !important;
    border-color: #504945 !important;
    color: #ebdbb2;
}

body.dark-theme pre {
    background-color: #282828 !important;
    border-color: #504945 !important;
    color: #ebdbb2;
}

/* ===== DARK THEME CODE BLOCK FIXES ===== */

/* Line number column background - makes the line number area dark instead of white */
body.dark-theme .lntable .lntd:first-child {
    background-color: #1d2021 !important;
}
body.dark-theme .lntable .lntd:first-child pre,
body.dark-theme .lntable .lntd:first-child pre.chroma {
    background-color: #1d2021 !important;
}

/* Line number text color - ensures line numbers are visible */
body.dark-theme .lnt {
    color: #ebdbb2 !important;
}

/* Vertical separator between line numbers and code - overrides light gray border */
body.dark-theme .highlight .lntable .lntd:first-child {
    border-right-color: #3c3836 !important;
}

/* 80-column guide line - vertical line at 80 characters in code blocks */
body.dark-theme .highlight .lntable .lntd:last-child::after {
    background-color: #3c3836 !important;
}

body.dark-theme .lntable .lntd:first-child pre,
body.dark-theme .lntable .lntd:first-child pre.chroma {
    background-color: #1d2021 !important;
}

body.dark-theme .lnt {
    color: #ebdbb2 !important;
}

/* Dark theme table borders in code blocks (line numbers/code separator) */
body.dark-theme .highlight .lntable .lntd:first-child {
    border-right-color: #3c3836 !important;
}

/* Central footer */
body.dark-theme .content-footer {
    background-color: #282828 !important;
}

body.dark-theme .content-footer div {
    color: #928374 !important;
}

body.dark-theme #info pre {
    color: #d5c4a1 !important;
}

body.dark-theme .left-sidebar-footer {
    border-color: #504945 !important;
    color: #d5c4a1 !important;
    background-color: #282828 !important;
}

body.dark-theme #sidebar .footer {
    background-color: #282828 !important;
    border-color: #504945 !important;
    color: #d5c4a1 !important;
}

body.dark-theme #sidebar .fixed-header {
    background-color: #282828 !important;
    border-color: #504945 !important;
}

body.dark-theme #grid-animation-container {
    border-top-color: #444;
}

/* ===== COMBINED LOGO AND PLUS GRID SECTION ===== */

#grid-animation-container-top {
    position: relative;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 5px 10px;
    margin: 5px 0;
    border-top: 1px solid #dee2e6;
}

#grid-resize-handle-top {
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    z-index: 10;
}

#site-logo {
    position: absolute;
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 32px;
    font-weight: normal;
    color: #666;
    z-index: 5;
    user-select: none;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.8;
}

#animated-grid-top {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 6;
}

body.dark-theme #grid-animation-container-top {
    border-top-color: #3c3836;
    border-bottom-color: #3c3836;
}

body.dark-theme #site-logo {
    color: #928374;
    opacity: 0.7;
}

/* ===== DARK THEME LAYOUT BORDER FIXES ===== */

/* Content navigation bar bottom border - horizontal line above page titles */
body.dark-theme #content-nav-top {
    border-bottom-color: #3c3836 !important;
}

/* H1 title bottom borders - horizontal lines below section headings */
body.dark-theme #content h1 {
    border-bottom-color: #3c3836 !important;
}

/* ===== DARK THEME SIDEBAR FIXES ===== */

/* Contents tab text color - ensures slash separators like "git / jj" are visible */
body.dark-theme #contents li {
    color: #ebdbb2 !important;
}

body.dark-theme #theme-toggle-icon {
    color: #7dcea0;
}

body.dark-theme #theme-toggle-icon:hover {
    color: #ffb347;
}

/* Blinking animation for failed status */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.status-failed {
    animation: blink 2s infinite;
}

/* Dark theme status colors in System tab */
body.dark-theme .status-value span[style*="color:red"] {
    color: #ffcccc !important;
}

body.dark-theme .status-value span[style*="color:green"] {
    color: #99ff99 !important;
}

body.dark-theme .status-value span[style*="color:#90ee90"] {
    color: #bbffbb !important;
}

body.dark-theme .status-value span[style*="color:gray"] {
    color: #cccccc !important;
}

body.dark-theme .status-value span[style*="color:#FFB347"] {
    color: #ffb347 !important;
}

#theme-toggle-icon:hover {
    opacity: 0.7 !important;
}

/* ===== SITE LOGO ===== */

/* Logo container - positioned at top of right sidebar */
#site-logo {
    position: relative;
    text-align: center;
    padding: 15px 10px 10px 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 28px;
    font-weight: normal;
    color: #555;
    z-index: 100;
    user-select: none;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 1;
}



/* Dark theme logo colors - blended with background */
body.dark-theme #site-logo {
    color: #a89984;
    opacity: 1;
}

/* ===== TXT HIGHLIGHTING ===== */

/* Use display: contents to make spans transparent to layout while preserving color */
pre code span,
pre span,
code span {
    display: contents;
}

.task-critical,
.task-pending,
.task-completed,
.task-question,
.progress-bar {
    display: contents;
}

.txt-comment {
    color: #928374;
}

.task-critical {
    color: #cc241d;
}

.task-pending {
    color: #458588;
}

.task-completed {
    color: #98971a;
}

.task-question {
    color: #d79921;
}

.progress-bar {
    color: #928374;
}

.task-completed-line {
    color: #b0b0b0;
    opacity: 0.35;
}

.task-completed-line .progress-bar {
    color: inherit;
}

/* Decision tree styling */
.tree-box {
    color: #458588;
}

.tree-line {
    color: #928374;
}

.tree-yes {
    color: #98971a;
}

.tree-no {
    color: #cc241d;
}

/* Dark theme adjustments for highlighting */
body.dark-theme .task-critical {
    color: #fb4934;
}

body.dark-theme .task-pending {
    color: #7dcea0;
}

body.dark-theme .task-completed {
    color: #b8bb26;
}

body.dark-theme .task-question {
    color: #ffb347;
}

body.dark-theme .progress-bar {
    color: #a89984;
}

body.dark-theme .task-completed-line {
    color: #504945;
    opacity: 0.4;
}

body.dark-theme .task-completed-line .progress-bar {
    color: inherit;
}

/* Dark theme decision tree styling */
body.dark-theme .tree-box {
    color: #7dcea0;
}

body.dark-theme .tree-line {
    color: #928374;
}

body.dark-theme .tree-yes {
    color: #b8bb26;
}

body.dark-theme .tree-no {
    color: #fb4934;
}

body.dark-theme .txt-comment {
    color: #928374;
}

/* ===== SYNTAX HIGHLIGHTING THEME OVERRIDES ===== */

/* Light theme syntax colors */
.chroma { color: #2a2a2a; }
.chroma .lnt { color: #999; }
.chroma .ln { color: #999; }

/* Dark theme syntax colors */
body.dark-theme .chroma { color: #ebdbb2; }
body.dark-theme .chroma .lnt { color: #928374; }
body.dark-theme .chroma .ln { color: #928374; }
body.dark-theme .chroma .lntd:first-child { background-color: #1d2021; }
body.dark-theme .chroma .lntd:first-child pre { background-color: #1d2021; }
body.dark-theme .chroma .hl { background-color: #3c3836; }

/* Light theme line numbers background */
.chroma .lntd:first-child { background-color: #f5f5f5; }
.chroma .lntd:first-child pre { background-color: #f5f5f5; }