:root {
    /* Cold palette */
    --bg: #06161a;
    --panel: #071f24;
    --panel-2: #052126;
    --text: #cfe7ea;
    --muted: #86b6bd;
    --faint: #4d7f86;

    --link: #48d1ff;
    --link-hover: #9ae9ff;

    --accent: #7fffc5;     /* headings / highlights */
    --accent-2: #88befc;   /* secondary highlight */

    --border: rgba(127, 255, 207, 0.14);
    --shadow: rgba(0, 0, 0, 0.45);

    --radius: 14px;

    --shell-pad: clamp(16px, 3vw, 28px);
    --shell-max: clamp(70ch, 60vw, 96ch);

    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

* { box-sizing: border-box; }
html { height: 100%; }

body {
    margin: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 330px),
        var(--bg);
    background-repeat: no-repeat;
    color: var(--text);
    font-family: var(--mono);
    line-height: 1.65;
    text-rendering: geometricPrecision;
}

.shell {
    margin-inline: auto;
    padding-inline: var(--shell-pad);

    inline-size: min(100%, var(--shell-max));
}

/* Header / “terminal chrome” */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
    background: rgba(6, 22, 26, 0.72);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.prompt {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: baseline;
    padding: 14px 0 8px;
    color: var(--muted);
    font-size: 0.95rem;
}

.prompt-user { color: var(--accent); }
.prompt-path { color: var(--accent-2); }
.prompt-caret { color: var(--faint); }

.crumbs a {
    color: var(--muted);
    text-decoration: none;
}
.crumbs a:hover { color: var(--link-hover); text-decoration: underline; }

/* Primary nav (your existing .nav/.nav-link) */
.nav {
    display: flex;
    gap: 14px;
    padding: 0 0 14px;
    flex-wrap: wrap;
}

.nav-link {
    color: var(--muted);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
}
.nav-link:hover {
    color: var(--link-hover);
    border-color: rgba(85, 214, 255, 0.18);
    background: rgba(85, 214, 255, 0.06);
}
.nav-link.is-active {
    color: var(--text);
    border-color: rgba(127, 255, 207, 0.22);
    background: rgba(127, 255, 207, 0.08);
}

/* Main content */
.content {
    padding: 26px 0 64px;
}

p, ul, ol { margin: 0 0 16px; color: var(--text); }
small, .muted { color: var(--muted); }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

hr {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 28px 0;
}

.lead {
    font-size: 1.2rem;
    color: color-mix(in srgb, var(--text) 70%, var(--muted));
}

/* Headings like the example: bold, spaced, slightly “glowy” */
h1, h2, h3 {
    font-family: var(--mono);
    margin: 26px 0 10px;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

h1 {
    font-size: clamp(2.0rem, 4vw, 2.6rem);
    color: var(--accent);
    text-shadow: 0 0 22px rgba(127, 255, 207, 0.16);
}

h2 {
    font-size: 1.55rem;
    color: rgba(127, 255, 207, 0.92);
    text-shadow: 0 0 18px rgba(127, 255, 207, 0.10);
}

h3 {
    font-size: 1.15rem;
    color: rgba(122, 184, 255, 0.90);
}

/* Lists: tighter + terminal-ish */
ul { padding-left: 20px; }
li { margin: 6px 0; color: var(--muted); }
li strong { color: var(--text); }

/* Code blocks / inline code */
code, pre {
    font-family: var(--mono);
    font-size: 0.95em;
}

code {
    padding: 0.15em 0.35em;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(7, 31, 36, 0.7);
    border-radius: 8px;
}

pre {
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.10);
    background: linear-gradient(180deg, rgba(7, 31, 36, 0.85), rgba(5, 33, 38, 0.85));
    overflow: auto;
    box-shadow: 0 18px 40px var(--shadow);
}

/* Subtle section panels */
.panel {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(7, 31, 36, 0.55);
    border-radius: var(--radius);
    padding: 16px 18px;
}

.meta {
    margin: 12px 0 10px;
    color: var(--muted);
    font-size: 0.95rem;
}

/* Add “# ” / “## ” / “### ” automatically */
.prose h1::before { content: "# "; }
.prose h2::before { content: "## "; }
.prose h3::before { content: "### "; }
.prose h4::before { content: "#### "; }
.prose h5::before { content: "##### "; }
.prose h6::before { content: "###### "; }

/* Keep the hashes aligned + don't wrap weirdly */
.prose :is(h1,h2,h3,h4,h5,h6) {
    position: relative;
}

.prose :is(h1,h2,h3,h4,h5,h6)::before {
    opacity: 0.55;
    white-space: pre;        /* preserves the trailing space */
}