:root {
    --bg: #050607;
    --fg: #d6fbe9;
    --muted: rgba(214, 251, 233, 0.25);
    --accent: #9dffcf;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* Global Reset */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--mono);
}

/* Prevents highlighting for decorative elements */
.noselect {
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

/* Layout Wrapper */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: min(1100px, 95%);
    margin: 0 auto;
    padding: 20px 0;
    gap: 15px;
}

/* ASCII Box System */
.ascii-box { display: flex; flex-direction: column; width: 100%; }
.fill-space { flex: 1 0 auto; }
.ascii-row { display: flex; width: 100%; }
.mid-grow { flex-grow: 1; }

/* Infinite Border Logic */
.ascii-h-line {
    flex-grow: 1;
    height: 1.2em;
    position: relative;
    background-image: linear-gradient(to right, var(--muted) 50%, transparent 50%);
    background-size: 1ch 1px; 
    background-repeat: repeat-x;
    background-position: center;
}

.ascii-v-line {
    width: 1ch;
    flex-shrink: 0;
    background-image: linear-gradient(to bottom, var(--muted) 50%, transparent 50%);
    background-size: 1px 1.2em;
    background-repeat: repeat-y;
    background-position: center;
}

.ascii-corner {
    color: var(--muted);
    width: 1ch;
    text-align: center;
    line-height: 1.2em;
}

.ascii-title {
    position: absolute;
    left: 2ch;
    top: 0;
    background: var(--bg);
    padding: 0 1ch;
    color: var(--fg);
    font-size: 0.95em;
    line-height: 1.2em;
    text-transform: lowercase;
}

.ascii-content {
    flex-grow: 1;
    padding: 10px 20px;
}

/* Header, Logo, and Nav */
.brand-logo pre {
    margin: 0;
    padding: 10px 0;
    color: var(--accent);
    line-height: 1.1;
    font-size: min(0.9vw, 10px);
    overflow: hidden;
    white-space: pre;
}

.main-nav {
    display: flex;
    gap: 3ch;
    flex-wrap: wrap;
    margin-top: 25px;
    padding-bottom: 10px;
}

.main-nav a { 
    color: var(--fg); 
    text-decoration: none; 
}

.main-nav a.active { 
    color: var(--accent); 
}

.main-nav a.active::before { 
    content: "> "; 
}

/* Footer Styling */
.footer-row {
    color: var(--muted);
    font-size: 0.85em;
}