:root {
    /* Colors */
    --bg-main: #111;
    --bg-panel: #151515;
    --bg-input: #222;
    --bg-hover: #222;
    --bg-active: #333;

    --text-main: #eee;
    --text-dim: #ccc;
    --text-highlight: #cfe6ff;

    --border-main: #444;
    --border-input: #555;

    /* Layout */
    --menu-width: 260px;
    --padding: 10px;
    --radius: 4px;
}

/* Base */
body {
    margin: 0;
    font-family: monospace;
    background: var(--bg-main);
    color: var(--text-main);
}

/* Global links */
a {
    color: var(--bg-main);
    background: var(--text-dim);
}

a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Inline links inside content */
.contentPage a {
    background: none;
    color: var(--text-highlight);
}

/* Code pages */
.prePage {
    padding: 20px;
}

/* External links */
a[href^="http"]::after {
    content: " ↗";
    font-size: 0.8em;
    opacity: 0.7;
}

/* Download links */
a[href$=".pdf"]::before {
    content: " 📄";
    font-size: 0.8em;
    opacity: 0.7;
}

/* App layout */
#app {
    display: flex;
    height: 100vh;
}

/* Sidebar menu */
#menu {
    width: var(--menu-width);
    border-right: 1px solid var(--border-main);
    padding: var(--padding);
    box-sizing: border-box;
    background: var(--bg-panel);
    overflow-y: auto;
}

/* Filter input */
#filter {
    width: 100%;
    padding: 5px;
    margin: 0 0 10px 0;
    box-sizing: border-box;
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-input);
    font: inherit;
}

/* Page list */
#pages p {
    margin: 0 0 6px 0;
}

/* Menu links */
#pages a {
    color: var(--text-dim);
    background: var(--bg-main);
    text-decoration: none;
    display: block;
    padding: 4px 6px;
}

#pages a:hover {
    background: var(--bg-hover);
    color: var(--text-highlight);
}

#pages a.active {
    background: var(--bg-active);
    color: #fff;
}

/* Main view */
#view {
    flex: 1;
    border: 0;
    background: var(--bg-main);
}

/* Content pages */
.contentPage {
    padding: 20px;
    max-width: 800px;
}

/* Layout blocks */
.intro {
    display: flex;
    gap: 30px;
    max-width: 800px;
    flex-wrap: wrap-reverse;
}

.left {
    flex: 1 1 280px;
}

.right {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
}

/* Images */
.profile {
    width: 100%;
    max-width: 264px;
    margin: 0 0 10px 0;
    border-radius: var(--radius);
}

/* Meta text */
.meta {
    line-height: 1.5;
    color: var(--text-dim);
}


.ascii {
    display: inline-block;
    width: auto;

    margin-top: 15px;
    padding: 10px;

    font-family: monospace;
    font-size: 0.9rem;
    line-height: 1.2;

    color: var(--text-muted);
    background: var(--bg-panel);
    border: 1px dashed var(--border-main);
    border-radius: var(--radius);

    overflow-x: auto;
}
/* Mobile tweaks (only things that don't break layout logic) */
@media (max-width: 700px) {

    #app {
        flex-direction: column;
    }

    #menu {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-main);
    }

    #pages a {
        padding: 8px;
    }

    #filter {
        padding: 8px;
    }

    #view {
        width: 100%;
        height: calc(100vh - 160px);
    }

    .profile {
        max-width: 200px;
    }

    pre {
        font-size: 0.85em;
    }
}