:root {
    /* CRT green brand & theme tokens */
    --cc-primary: rgba(0, 120, 0);
    --cc-accent: rgba(0, 120, 0);
    --cc-primary-05: rgba(0, 120, 0, .05);
    --cc-primary-10: rgba(0, 120, 0, .10);

    /* Solarized Light inspired base */
    --cc-bg: rgba(253, 246, 227); /* base3 */
    --cc-surface: rgb(238 232 213); /* base2 */
    --cc-text: rgb(7 54 66); /* base02 */
    --cc-muted: rgb(101 123 131); /* base00 */
    --cc-border: rgb(147 161 161); /* base1 */
    --cc-blockquote-bg: var(--cc-primary-05);

    --cc-tbl-header-bg: rgba(255, 255, 255, .04);
    --cc-tbl-even-bg: rgba(255, 255, 255, .02);
    --cc-diagram-bg: rgba(0, 0, 0, .75);

    /* Code blocks */
    --code-bg: var(--cc-surface);
    --code-fg: rgb(7 54 66);
    --code-border: var(--cc-border);

    /* Syntax Highlighting (Solarized Light inspired) */
    --hl-comment: rgb(147 161 161);
    --hl-keyword: rgb(133 153 0);
    --hl-name: var(--code-fg);
    --hl-const: rgb(181 137 0);
    --hl-attr: rgb(38 139 210);
    --hl-entity: rgb(203 75 22);
    --hl-error: rgb(220 50 47);
    --hl-num: rgb(211 54 130);
    --hl-str: rgb(42 161 152);
    --hl-op: rgb(108 113 196);
    --hl-diff-del-bg: rgba(239, 68, 68, .18);
    --hl-diff-ins-bg: rgba(34, 197, 94, .18);
    --hl-diff-del-x: rgba(239, 68, 68, .30);
    --hl-diff-ins-x: rgba(34, 197, 94, .30);

    /* Status colours for Maven reports (surefire, jacoco, …) */
    --st-success: rgb(42 161 152);
    --st-failure: rgb(220 50 47);
    --st-warning: rgb(181 137 0);
    --st-skipped: rgb(147 161 161);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Lighter CRT green brand & theme tokens */
        --cc-primary: rgba(0, 209, 0);
        --cc-accent: rgba(0, 209, 0);
        --cc-primary-05: rgba(0, 209, 0, .05);
        --cc-primary-10: rgba(0, 209, 0, .10);

        --cc-text: rgb(230 230 230);
        --cc-muted: rgb(163 163 163);
        --cc-bg: rgb(18 18 18);
        --cc-surface: rgb(28 28 28);
        --cc-border: rgb(42 42 42);
        --cc-blockquote-bg: var(--cc-primary-10);

        --code-bg: rgb(20 20 20);
        --code-fg: rgb(232 232 232);
        --code-border: var(--cc-border);

        --hl-keyword: rgb(163 196 0);
        --hl-const: rgb(224 179 75);
        --hl-attr: rgb(78 164 224);
        --hl-entity: rgb(240 121 43);
        --hl-error: rgb(239 68 68);
        --hl-num: rgb(244 114 182);
        --hl-str: rgb(51 209 182);
        --hl-op: rgb(159 134 255);
        --hl-diff-del-bg: rgba(239, 68, 68, .25);
        --hl-diff-ins-bg: rgba(34, 197, 94, .25);
        --hl-diff-del-x: rgba(239, 68, 68, .45);
        --hl-diff-ins-x: rgba(34, 197, 94, .45);

        --st-success: rgb(51 209 182);
        --st-failure: rgb(239 68 68);
        --st-warning: rgb(224 179 75);
        --st-skipped: rgb(163 163 163);
    }
}

/* 1. BASE STYLES */
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--cc-bg);
    color: var(--cc-text);
    max-width: 100%;
    margin: 0;
}

h1, h2, h3, h4 {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
    margin-top: 0;
}

code, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

a {
    color: var(--cc-primary);
    text-underline-offset: .15em;
    overflow-wrap: anywhere;
    word-break: break-word; /* legacy fallback */
}

a:hover {
    text-decoration: underline;
}

/* 2. LAYOUT & CONTAINERS */
.container-wide {
    max-width: min(1200px, 80vw);
    margin-inline: auto;
    padding-inline: 1rem;
}

.logo {
    width: 2em;
    height: 2em;
    padding: 0.35em;
}

.hero {
    padding: 3rem 0;
}

.hero h1 {
    font-size: 2.25rem;
    line-height: 1.2;
    margin-bottom: .5rem;
}

.hero p.lead {
    font-size: 1.125rem;
    color: var(--cc-muted);
    margin: .5rem 0 1rem;
}

.hero-grid, .cards, .posts-grid, .home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 800px) {
    .hero-grid {
        grid-template-columns: 1.4fr .6fr;
    }

    .cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 900px) {
    .posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }

    .home-grid {
        grid-template-columns: minmax(0, 2.5fr) minmax(280px, 1fr);
    }
}

.posts-grid--single {
    grid-template-columns: 1fr !important;
}

.home-sidebar {
    padding: 1rem;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 3. COMPONENTS */
.card, .post-card {
    border: 1px solid var(--cc-border);
    border-radius: 0;
    padding: 1rem;
    background: var(--cc-surface);
}

.post-card h3 {
    margin: .25rem 0 .5rem;
    font-size: 1.1rem;
}

.post-meta {
    color: var(--cc-muted);
    font-size: .9rem;
}

.btn {
    display: inline-block;
    padding: .5rem .9rem;
    border-radius: 0;
    font-weight: 600;
    text-decoration: none;
}

.btn-primary {
    background: var(--cc-primary);
    color: var(--cc-surface);
}

.btn-ghost {
    border: 1px solid currentColor;
    color: var(--cc-primary);
    background: transparent;
}

.btn:hover {
    filter: brightness(0.95);
}

.tag {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 0;
    margin: 0 .5rem .25rem 0;
    background: var(--cc-primary-10);
    color: var(--cc-primary);
    font-size: .85em;
}

blockquote {
    border-left: 4px solid var(--cc-primary);
    padding: .5rem 1rem;
    background: var(--cc-blockquote-bg);
}

/* 4. CONTENT SAFETY & RESPONSIVENESS */
#main, .post-content, .post-content li, .post-content p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Consistent scrollable containers for wide content */
pre, .highlight, .highlighter-rouge .highlight, .diagram, table, .diagram-render {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

code {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* Pathological long strings fallback */
@supports not (overflow-wrap: anywhere) {
    .post-content a {
        word-break: break-all;
    }
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

th, td {
    padding: .5rem .75rem;
    border: 1px solid var(--cc-border);
    text-align: left;
    vertical-align: top;
}

thead th {
    background: rgba(17, 24, 39, .04);
}

tbody tr:nth-child(even) {
    background: rgba(17, 24, 39, .02);
}

@media (prefers-color-scheme: dark) {
    thead th {
        background: var(--cc-tbl-header-bg);
    }

    tbody tr:nth-child(even) {
        background: var(--cc-tbl-even-bg);
    }
}

/* 5. SITE HEADER & FOOTER */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cc-surface);
    border-bottom: 1px solid var(--cc-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 0;
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.site-header__nav a {
    color: inherit;
    text-decoration: none;
    padding: .25rem .4rem;
}

.site-header__nav a:hover {
    text-decoration: underline;
}


@media (max-width: 800px) {
    .site-header__nav {
        display: none;
    }

    body {
        padding-bottom: 4rem;
    }
}

/* Bottom navigation bar (mobile only) */
.bottom-nav {
    display: none;
}

@media (max-width: 800px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: var(--cc-surface);
        border-top: 1px solid var(--cc-border);
        justify-content: space-around;
        align-items: stretch;
        height: 4rem;
    }

    .bottom-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        gap: .2rem;
        color: inherit;
        text-decoration: none;
        font-size: .7rem;
        padding: .25rem .1rem;
        min-width: 44px;
        min-height: 44px;
    }

    .bottom-nav__item:hover,
    .bottom-nav__item:focus {
        background: var(--cc-primary-10);
        text-decoration: none;
    }

    .bottom-nav__icon {
        font-size: 1.3rem;
        line-height: 1;
    }

    .bottom-nav__label {
        line-height: 1;
    }
}

.site-footer {
    margin-top: 2rem;
    border-top: 1px solid var(--cc-border);
    background: var(--cc-surface);
}

.site-footer__inner {
    padding: 2rem 1rem;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .site-footer__inner {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

.site-footer__bottom {
    border-top: 1px solid var(--cc-border);
    padding: .75rem 1rem;
    color: var(--cc-muted);
    text-align: center;
}

.site-footer a {
    color: inherit;
}

.site-footer .muted {
    color: var(--cc-muted);
}

/* 6. SYNTAX HIGHLIGHTING (ROUGE) */
.highlighter-rouge .highlight, .diagram {
    color: var(--code-fg);
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: 0;
}

.highlight {
    line-height: 1.45;
}

.highlight pre {
    padding: 0;
    margin: 0;
}

.highlight .c, .highlight .cm, .highlight .c1 {
    color: var(--hl-comment);
    font-style: italic;
}

.highlight .cp {
    color: var(--hl-const);
}

.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt {
    color: var(--hl-keyword);
}

.highlight .n, .highlight .nx {
    color: var(--hl-name);
}

.highlight .nc, .highlight .no {
    color: var(--hl-const);
}

.highlight .na, .highlight .nf, .highlight .nn, .highlight .nt {
    color: var(--hl-attr);
}

.highlight .ni {
    color: var(--hl-entity);
}

.highlight .ne {
    color: var(--hl-error);
}

.highlight .l, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo {
    color: var(--hl-num);
}

.highlight .s, .highlight .sa, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s1, .highlight .s2, .highlight .se, .highlight .sh, .highlight .si, .highlight .sr, .highlight .ss, .highlight .sx {
    color: var(--hl-str);
}

.highlight .o, .highlight .ow {
    color: var(--hl-op);
}

.highlight .p {
    color: var(--hl-name);
}

.highlight .gd {
    color: var(--code-fg);
    background: var(--hl-diff-del-bg);
    box-shadow: inset 4px 0 0 #EF4444;
}

.highlight .gi {
    color: var(--code-fg);
    background: var(--hl-diff-ins-bg);
    box-shadow: inset 4px 0 0 #22C55E;
}

.highlight .gd .x {
    background: var(--hl-diff-del-x);
}

.highlight .gi .x {
    background: var(--hl-diff-ins-x);
}

.highlight .gr {
    color: #F87171;
}

.highlight .gh {
    color: #93C5FD;
    font-weight: 600;
}

.highlight .gs {
    font-weight: 600;
}

.highlight .ge {
    font-style: italic;
}

/* 7. DIAGRAMS */
.diagram-title {
    font-weight: 600;
    margin: .25rem 0 .5rem;
    color: var(--cc-muted);
}

.diagram-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
    align-items: start;
}

@media (min-width: 900px) {
    .diagram-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.diagram-source pre {
    max-height: 28rem;
    margin: 0;
}

.diagram-source, .diagram-render {
    min-width: 0;
    background: var(--cc-surface);
}

.diagram-render {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 6rem;
}

.diagram-render img, .diagram-render svg {
    cursor: zoom-in;
}

.diagram-zoom-overlay {
    position: fixed;
    inset: 0;
    background: var(--cc-diagram-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
    cursor: zoom-out;
}

.diagram-zoom-overlay__inner {
    max-width: 95vw;
    max-height: 95vh;
    overflow: auto;
    background: transparent;
}

.diagram-zoom-overlay__inner img, .diagram-zoom-overlay__inner svg {
    display: block;
    max-width: 95vw;
    max-height: 95vh;
    height: auto;
}

/* 8. MISC COMPONENTS */
.list-compact {
    margin: .25rem 0;
    padding-left: 1.1rem;
}

.list-compact li {
    margin: .15rem 0;
}

.toc-list {
    list-style: none;
    padding-left: 0;
    margin: .5rem 0;
}

.toc-list li {
    margin: .25rem 0;
}

.toc-list .toc-level-3 {
    margin-left: 1rem;
    opacity: .9;
}

.skip-link {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    padding: .5rem;
    background: var(--cc-bg);
    border: 2px solid var(--cc-primary);
}

/* 9. PRINT STYLES */
@media print {
    body {
        font-family: Georgia, "Times New Roman", serif;
        color: black;
        background: white;
    }

    .btn, nav, header, footer, .bottom-nav {
        display: none !important;
    }

    .card, .post-card, pre, .diagram-source, .diagram-render {
        border: none;
        background: white;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
    }

    .diagram-grid {
        grid-template-columns: 1fr;
    }

    .diagram-source pre {
        max-height: none;
    }
}

/* Search Results Styles */
#results-container {
    list-style: none;
    padding-left: 0;
}

#results-container li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cc-border);
}

#results-container li:last-child {
    border-bottom: none;
}

#results-container a {
    font-weight: bold;
    text-decoration: none;
}

#results-container small {
    color: var(--cc-muted);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}