html {
    scroll-behavior: smooth;
}

:root {
    --bg: #c3ef9d;
    --paper: #f0fed8;
    --paper-2: #b2e986;
    --zebra: #e6fbc4;
    --ink: #172500;
    --muted: #526322;
    --rule: #6a9d3d;
    --heavy: #426b28;
    --link: #0033cc;
    --visited: #6a2488;
    --button: #ddf79b;
    --term-bg: #0d1806;
    --term-bar: #1c2c10;
    --term-ink: #c8f2a4;
    --term-dim: #7ea45e;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    --serif: Georgia, "Times New Roman", serif;
    --shell: 1180px;
    --content: 760px;
    --page: 860px;
    --toc: 260px;
    --gutter: 24px;
    --header-h: 68px;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

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

a:visited {
    color: var(--visited);
}

a:hover,
a:focus {
    color: #000;
    background: #c0ed72;
}

.skip-link {
    position: absolute;
    left: 8px;
    top: -40px;
    padding: 4px 8px;
    border: 1px solid var(--heavy);
    background: var(--paper);
}

.skip-link:focus {
    top: 8px;
}

/* ---- Shell: banner/nav/footer centered at the same max as the docs grid ---- */
.header-banner,
.site-nav,
.site-footer {
    width: var(--shell);
    max-width: calc(100% - 2 * var(--gutter));
    margin: 0 auto;
}

/* The header wrapper is dissolved to a plain flow container (display: contents)
   so its two parts behave independently: the decorative banner scrolls away
   with the page, and the slim Manual/Tutorials/Recipes nav is what stays
   pinned. Fusing them into one sticky, in-flow box (the old design) meant
   collapsing the banner removed ~354px of layout height, reflowed the content,
   and moved the scroll position, which re-crossed the collapse threshold and
   flickered. Splitting them removes that feedback entirely. */
.site-header {
    display: contents;
}

/* The banner (ASCII logo, title, tagline) is ordinary flow content at the top
   of the page. It simply scrolls out of view as you read down and reappears at
   the top. No height animation, no scroll-coupled state, so it cannot reflow
   under itself. */
.header-banner {
    padding-top: 24px;
}

/* The slim nav stays pinned at the top of every page while you scroll and while
   moving between tabs, so Manual/Tutorials/Recipes are always reachable. Its
   height is measured into --header-h (site.js) so the sticky TOC and anchor
   jumps clear it. */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg);
}

.banner {
    width: 100%;
    margin: 0 0 18px;
    padding: 10px;
    overflow-x: auto;
    border: 1px solid var(--heavy);
    color: #000;
    background: var(--paper);
    font-family: "Courier New", Courier, monospace;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    white-space: pre;
}

.banner-art {
    display: inline-block;
    text-align: left;
    text-shadow: 0.35px 0 #000;
}

h1,
h2,
h3,
h4 {
    font-family: var(--serif);
    font-weight: normal;
    color: #102400;
}

h1 {
    margin: 0;
    font-size: 46px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.tagline {
    margin: 6px 0 18px;
    font-size: 18px;
    color: var(--muted);
}

.top-links,
.compact-links {
    color: var(--muted);
}

.footer-legal {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
}

/* ---- Layer A: top-level site nav (distinct pages only) ---- */
.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-top: 16px;
    border-bottom: 2px solid var(--rule);
}

.site-nav a,
.site-nav .current {
    padding: 7px 20px;
    margin-right: 5px;
    border: 1px solid var(--rule);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--paper-2);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.2;
    text-decoration: none;
}

.site-nav a,
.site-nav a:visited {
    color: var(--link);
}

.site-nav a:hover,
.site-nav a:focus {
    background: #c0ed72;
    color: #000;
}

.site-nav .current {
    margin-bottom: -2px;
    padding-bottom: 9px;
    background: var(--paper);
    color: var(--ink);
    font-weight: bold;
    cursor: default;
}

.site-nav .doc-version {
    margin-left: auto;
    align-self: center;
    padding: 0 2px 4px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--muted);
}

/* ---- Two-column docs layout: sticky section TOC on the left, content on the right ---- */
.docs-layout {
    display: grid;
    grid-template-columns: var(--toc) minmax(0, var(--content));
    gap: 48px;
    justify-content: center;
    width: var(--shell);
    max-width: calc(100% - 2 * var(--gutter));
    margin: 24px auto 0;
    align-items: start;
}

/* ---- Layer B/C: in-page table of contents (sections within this page only) ---- */
.toc {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 32px);
    overflow-y: auto;
    padding: 4px 4px 16px;
    border-right: 1px solid var(--rule);
}

.toc-title {
    margin: 4px 0 10px;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--muted);
}

.toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.toc > ul > li {
    margin: 0 0 4px;
}

.toc li {
    margin: 1px 0;
}

.toc a {
    display: block;
    padding: 4px 10px;
    border-left: 2px solid transparent;
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.35;
    text-decoration: none;
}

.toc a,
.toc a:visited {
    color: var(--link);
}

.toc > ul > li > a {
    font-weight: bold;
}

.toc ul ul {
    margin: 2px 0 6px;
}

.toc ul ul a {
    padding: 3px 10px 3px 18px;
    font-size: 14px;
    color: var(--muted);
}

.toc a:hover,
.toc a:focus {
    border-left-color: var(--heavy);
    background: var(--paper);
    color: #000;
}

/* Standalone pages (tutorials, recipes) center their content column. */
.site-main {
    min-width: 0;
    width: var(--page);
    max-width: calc(100% - 2 * var(--gutter));
    margin: 24px auto 0;
    scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Inside the two-column docs layout, the content fills its grid track. */
.docs-layout .site-main {
    width: auto;
    max-width: none;
    margin: 0;
}

/* ---- Section rhythm ---- */
.doc-group {
    margin-top: 8px;
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.doc-group + .doc-group {
    margin-top: 8px;
}

.doc-group > h2 {
    margin: 52px 0 18px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--rule);
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.25px;
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.doc-group:first-child > h2 {
    margin-top: 12px;
}

.section {
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.section > h3 {
    margin: 34px 0 10px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--rule);
    font-size: 23px;
    scroll-margin-top: calc(var(--header-h) + 16px);
}

h4 {
    margin: 24px 0 8px;
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.2px;
}

p {
    margin: 0 0 16px;
    max-width: 80ch;
}

ul {
    margin: 12px 0 18px;
    padding-left: 24px;
    max-width: 80ch;
}

li {
    margin: 4px 0;
}

code,
.code,
.term {
    font-family: var(--mono);
}

code {
    padding: 0 3px;
    color: #2d3300;
    background: var(--paper);
    font-size: 0.92em;
}

.code {
    margin: 12px 0 18px;
    padding: 11px 14px;
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--heavy);
    background: var(--paper);
    color: #111;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre;
}

/* ---- Callout box for in-progress or heads-up notes ---- */
.callout {
    margin: 14px 0 20px;
    padding: 12px 16px;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--heavy);
    background: var(--zebra);
    color: var(--ink);
}

.callout .callout-label {
    display: inline-block;
    margin-bottom: 6px;
    font-family: var(--serif);
    font-weight: bold;
    letter-spacing: 0.02em;
    color: var(--heavy);
}

.callout p {
    margin: 6px 0 0;
}

/* Terminal-window chrome: dark screen with a title bar and three dots. */
.term {
    margin: 14px 0 22px;
    padding: 12px 14px;
    overflow-x: auto;
    border: 1px solid var(--heavy);
    border-radius: 8px;
    background: var(--term-bg);
    color: var(--term-ink);
    font-size: 12.5px;
    line-height: 1.45;
    white-space: pre;
    box-shadow: 0 2px 0 rgba(23, 37, 0, 0.25);
}

/* ---- Copy-to-clipboard button, injected by site.js around each code block ---- */
.code-wrap {
    position: relative;
    margin: 12px 0 18px;
}

.code-wrap.is-term {
    margin: 14px 0 22px;
}

/* The wrapper carries the vertical rhythm now, so drop the pre's own margins. */
.code-wrap > .code,
.code-wrap > .term {
    margin: 0;
}

.copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    color: var(--muted);
    background: var(--paper);
    line-height: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.12s ease;
}

.code-wrap:hover .copy-btn,
.copy-btn:focus-visible {
    opacity: 1;
}

/* On the dark terminal blocks the light chip would clash, so match the screen
   and sit below the title bar. */
.code-wrap.is-term .copy-btn {
    top: 32px;
    border-color: var(--term-dim);
    color: var(--term-ink);
    background: var(--term-bar);
}

.code-wrap.is-term .copy-btn:hover {
    color: #000;
    background: var(--term-ink);
}

.copy-btn:hover {
    opacity: 1;
    color: #000;
    background: #c0ed72;
}

.copy-btn > svg {
    width: 15px;
    height: 15px;
    display: block;
}

.copy-btn.copied {
    opacity: 1;
    color: var(--heavy);
}

/* Rendered terminal captures: the PNG carries its own window chrome. */
.shot {
    display: block;
    width: 100%;
    height: auto;
    margin: 14px 0 22px;
    border: 1px solid var(--heavy);
    border-radius: 9px;
    box-shadow: 0 2px 0 rgba(23, 37, 0, 0.25);
}

.term::before {
    content: "";
    display: block;
    height: 26px;
    margin: -12px -14px 12px;
    border-bottom: 1px solid #2c4218;
    border-radius: 7px 7px 0 0;
    background-color: var(--term-bar);
    background-image:
        radial-gradient(circle at 17px 13px, #ff5f56 5px, transparent 5.8px),
        radial-gradient(circle at 37px 13px, #ffbd2e 5px, transparent 5.8px),
        radial-gradient(circle at 57px 13px, #27c93f 5px, transparent 5.8px);
    background-repeat: no-repeat;
}

/* ---- Tables: scroll on small screens, never crush the text ---- */
.table-wrap {
    margin: 16px 0 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rule);
}

table {
    width: 100%;
    min-width: 32em;
    border-collapse: collapse;
    background: var(--paper);
    font-size: 15px;
    line-height: 1.5;
}

caption {
    padding: 6px 10px;
    border-bottom: 1px solid var(--heavy);
    background: var(--paper-2);
    font-family: var(--serif);
    font-size: 18px;
    text-align: left;
}

th,
td {
    padding: 10px 14px;
    border: 1px solid var(--rule);
    vertical-align: top;
    text-align: left;
}

tbody tr:nth-child(even) td,
table tr:nth-child(even) td {
    background: var(--zebra);
}

th {
    background: var(--paper-2);
    font-weight: bold;
}

td code,
th code {
    overflow-wrap: break-word;
}

.coffee-button {
    display: inline-block;
    padding: 8px 14px;
    border: 2px outset var(--rule);
    color: #111;
    background: var(--button);
    font-weight: bold;
    text-decoration: none;
}

.coffee-button:visited {
    color: #111;
}

.coffee-button:hover,
.coffee-button:focus {
    border-style: inset;
    color: #000;
    background: #bdeb70;
}

.site-footer {
    margin-top: 44px;
    padding: 14px 0 34px;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 14px;
}

/* ---- Below the two-column breakpoint: TOC becomes a static panel above content ---- */
@media (max-width: 900px) {
    .docs-layout {
        display: block;
        margin-top: 16px;
    }

    .toc {
        position: static;
        max-height: none;
        overflow: visible;
        margin: 0 0 28px;
        padding: 12px 14px;
        border: 1px solid var(--rule);
        border-radius: 6px;
        background: var(--paper);
    }

    .toc-title {
        margin-top: 0;
    }

    .toc > ul {
        column-width: 15em;
        column-gap: 28px;
    }

    .toc > ul > li {
        break-inside: avoid;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 15px;
    }

    .banner {
        font-size: 9px;
    }

    h1 {
        font-size: 34px;
    }

    .tagline {
        font-size: 16px;
    }

    .doc-group > h2 {
        font-size: 26px;
        margin-top: 40px;
    }

    .section > h3 {
        font-size: 20px;
    }

    .term {
        font-size: 11px;
    }

    th,
    td {
        padding: 8px 10px;
    }
}

/* Respect users who ask for reduced motion: jump anchors instantly, no smooth
   scroll animation. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}