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;
}

::selection {
    background: var(--paper-2);
    color: var(--ink);
}

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 20px;
    padding: 10px;
    overflow-x: auto;
    border: 1px solid var(--heavy);
    color: #000;
    background: var(--paper);
    font-family: "Courier New", Courier, monospace;
    font-weight: 700;
    /* Scale the ASCII logo to the viewport so the widest line (124 monospace
       chars, ~0.6em advance each) always fits with a small margin and never
       forces horizontal scroll. Available inner width is roughly the viewport
       minus 48px gutters, 20px banner padding, and 2px border (~70px); the vw
       term keeps the art inside that, capping at the original 11px on wide
       screens (>=960px) so desktop is unchanged. */
    font-size: clamp(3px, calc((100vw - 80px) / 80), 11px);
    line-height: 1;
    text-align: center;
    white-space: pre;
}

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

/* Easter egg: on hover (pointer devices only, so it never fires on touch) the
   ASCII logo breathes a soft green glow in the site accent. Gated behind
   prefers-reduced-motion so reduced-motion users get a static banner. The
   0.35px 0 #000 faux-bold shadow is preserved through every keyframe. */
@media (prefers-reduced-motion: no-preference) {
    .banner-art {
        animation: banner-glow 2.6s ease-in-out infinite;
        animation-play-state: paused;
    }
    .banner:hover .banner-art {
        animation-play-state: running;
    }
}

@keyframes banner-glow {
    0%,
    100% {
        text-shadow: 0.35px 0 #000;
    }
    50% {
        text-shadow: 0.35px 0 #000, 0 0 5.75px rgba(66, 107, 40, 0.63);
    }
}

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

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

.tagline {
    margin: 6px 0 14px;
    font-size: 17px;
    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: 12px;
    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 {
    align-self: center;
    padding: 0 2px 4px;
    margin-left: 12px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--muted);
}

.site-nav-github {
    margin-left: 12px;
}

/* ---- Docs search: input in the nav, absolutely-positioned results dropdown --- */
/* margin-left:auto pushes the search box (and the version tag after it) to the
   far right of the nav row. position:relative anchors the results dropdown so
   it overlays content instead of reflowing the page. */
.nav-search {
    position: relative;
    margin-left: auto;
    align-self: center;
    display: flex;
    align-items: center;
    padding-bottom: 4px;
}

.nav-search-input {
    width: 190px;
    max-width: 46vw;
    padding: 5px 10px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.3;
}

.nav-search-input::placeholder {
    color: var(--muted);
    opacity: 1;
}

.nav-search-input:focus {
    outline: 2px solid var(--heavy);
    outline-offset: 1px;
    background: var(--paper);
}

/* The "/" hint sits over the right edge of the input; hidden while focused so
   it never overlaps typed text. */
.nav-search-hint {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 1px 5px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--paper-2);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
    pointer-events: none;
}

.nav-search-input:focus + .nav-search-hint,
.nav-search-input:not(:placeholder-shown) + .nav-search-hint {
    display: none;
}

.nav-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    width: 380px;
    max-width: 92vw;
    max-height: 70vh;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--heavy);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 0 8px 24px rgba(23, 37, 0, 0.28);
}

.nav-search-results[hidden] {
    display: none;
}

.nav-search-result {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ink);
}

.nav-search-result:hover,
.nav-search-result:focus,
.nav-search-result.is-active {
    background: #c0ed72;
    color: #000;
}

.nav-search-title {
    display: block;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.3;
    color: var(--heavy);
}

.nav-search-result.is-active .nav-search-title,
.nav-search-result:hover .nav-search-title {
    color: #102400;
}

.nav-search-crumb {
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 1px;
}

.nav-search-snippet {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink);
    margin-top: 3px;
}

.nav-search mark {
    padding: 0 1px;
    border-radius: 2px;
    background: var(--paper-2);
    color: var(--ink);
    font-weight: bold;
}

.nav-search-empty {
    margin: 0;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--muted);
}

/* On narrow screens the nav wraps; let the search box take the full row so the
   input and dropdown are comfortably tappable. */
@media (max-width: 640px) {
    .nav-search {
        margin-left: 0;
        width: 100%;
        order: 99;
    }
    .nav-search-input {
        width: 100%;
        max-width: none;
    }
    .nav-search-results {
        width: 100%;
    }
}

/* ---- 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: 48px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rule);
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: 0;
    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: 32px 0 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rule);
    font-size: 22px;
    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 16px;
    padding-left: 24px;
    max-width: 80ch;
}

li {
    margin: 4px 0;
}

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

code {
    padding: 0 4px;
    border-radius: 3px;
    color: #2d3300;
    background: var(--paper);
    font-size: 0.92em;
    /* Long paths and flags in inline code must never widen the page on
       narrow viewports; break anywhere rather than overflow. */
    overflow-wrap: anywhere;
}

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

/* Long shell lines scroll inside the block (never the page); keep the
   scrollbar slim and green so an overflowing block still looks tidy. */
.code,
.term,
.table-wrap,
.banner {
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}

/* ---- Callout box for in-progress or heads-up notes ---- */
.callout {
    margin: 16px 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: 16px 0 20px;
    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: 16px 0 20px;
}

.code-wrap.is-term {
    margin: 16px 0 20px;
}

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

/* The chip perches on the block's top-right border, half outside the box: it
   reaches 12px into the block, which the pre's 12px top padding absorbs, so
   the button can never sit over code, even when a long line scrolls under it. */
.copy-btn {
    position: absolute;
    top: -11px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    color: var(--muted);
    background: var(--paper);
    line-height: 0;
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

/* On the dark terminal blocks the chip lives inside the 26px title bar, to the
   right of the three dots, like a window control. The bar is chrome, never
   code, so the no-overlap guarantee holds there too. */
.code-wrap.is-term .copy-btn {
    top: 2px;
    right: 8px;
    border-color: transparent;
    color: var(--term-dim);
    background: transparent;
}

.code-wrap.is-term .copy-btn:hover,
.code-wrap.is-term .copy-btn:focus-visible {
    color: var(--term-bg);
    background: var(--term-ink);
}

.copy-btn:hover,
.copy-btn:focus-visible {
    color: #000;
    background: #c0ed72;
}

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

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

.code-wrap.is-term .copy-btn.copied {
    color: var(--term-ink);
}

/* Rendered terminal captures: the PNG carries its own window chrome. */
.shot {
    display: block;
    width: 100%;
    height: auto;
    margin: 16px 0 20px;
    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 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rule);
}

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

/* Only tables inside the scroll wrapper keep a readable minimum width; a bare
   table (the 404 page) must shrink to the viewport instead of widening it. */
.table-wrap table {
    min-width: 32em;
}

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: 48px;
    padding: 14px 0 34px;
    border-top: 3px double 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 24px;
        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: 900px) {
    /* Quickstart mobile puts the install hero before the in-page TOC. */
    .home-layout {
        display: flex;
        flex-direction: column;
        width: calc(100vw - 2 * var(--gutter));
        max-width: calc(100vw - 2 * var(--gutter));
        min-width: 0;
    }

    .home-layout .site-main {
        order: 1;
        width: 100%;
        max-width: 100%;
    }

    .home-layout .toc {
        order: 2;
        margin: 24px 0 0;
    }
}

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

    .header-banner,
    .site-nav,
    .site-footer,
    .docs-layout,
    .site-main {
        width: calc(100vw - 2 * var(--gutter));
        max-width: calc(100vw - 2 * var(--gutter));
        min-width: 0;
    }

    /* .banner font-size is handled by the viewport clamp on the base rule so
       the full logo fits without horizontal scroll on narrow screens. */

    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;
    }
}

/* ---- Homepage hero: headline, installer tabs, and recipe bootstrap snippets.
   The snippets reuse .code blocks so site.js wires copy buttons automatically. ---- */
.hero {
    margin: 6px 0 10px;
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.hero-title {
    margin: 0 0 8px;
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: 0;
    color: #102400;
}

.hero-sub {
    margin: 0 0 12px;
    max-width: 72ch;
    font-size: 17px;
    color: var(--muted);
}

.hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    max-width: 760px;
    align-items: start;
}

.hero-action {
    min-width: 0;
}

.install-tabs {
    margin: 0 0 10px;
}

.tab-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px;
    margin: 0;
    padding: 0 0 0 3px;
    border-bottom: 1px solid var(--heavy);
}

.tab-button {
    appearance: none;
    padding: 6px 14px 7px;
    border: 1px solid var(--rule);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--paper-2);
    color: var(--link);
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
}

.tab-button:hover,
.tab-button:focus-visible {
    background: #c0ed72;
    color: #000;
}

.tab-button:focus-visible {
    outline: 2px solid var(--heavy);
    outline-offset: 1px;
}

.tab-button.is-active {
    margin-bottom: -1px;
    padding-bottom: 8px;
    background: var(--paper);
    color: var(--ink);
    font-weight: bold;
}

.tab-panel {
    padding-top: 10px;
}

.tab-panel[hidden] {
    display: none;
}

.tab-panel .code,
.tab-panel .code-wrap {
    margin-top: 0;
    margin-bottom: 0;
}

.hero > .code-wrap {
    margin: 0 0 12px;
}

.hero-caption {
    margin: 8px 0 6px;
    font-family: var(--serif);
    font-size: 16px;
    font-weight: bold;
    color: var(--heavy);
}

.snippet-platform {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.snippet-label {
    margin: 0 0 5px;
    font-family: var(--serif);
    font-size: 14px;
    font-weight: bold;
    color: var(--heavy);
}

.snippet-note {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.snippet-detail {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.snippet-detail summary {
    color: var(--link);
    cursor: pointer;
}

.snippet-detail summary:hover,
.snippet-detail summary:focus-visible {
    background: #c0ed72;
    color: #000;
}

.snippet-detail .code-wrap {
    margin-top: 8px;
}

.hero-detail {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.hero-detail summary {
    color: var(--link);
    cursor: pointer;
}

.hero-detail summary:hover,
.hero-detail summary:focus-visible {
    background: #c0ed72;
    color: #000;
}

.hero-detail p {
    margin: 6px 0 0;
}

/* Hero snippets wrap, with room for the copy button on the first line. */
.hero-snippet,
.hero-recipe {
    padding: 11px 46px 11px 14px;
    overflow-x: visible;
    overflow-wrap: anywhere;
    border: 1px solid var(--heavy);
    border-left: 4px solid var(--heavy);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.45;
    white-space: pre-wrap;
    box-shadow: 0 2px 0 rgba(23, 37, 0, 0.25);
}

@media (max-width: 640px) {
    .hero-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .hero-title {
        font-size: 30px;
        margin-bottom: 6px;
        overflow-wrap: break-word;
    }

    .hero-sub {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .hero-caption {
        margin: 5px 0 4px;
        font-size: 15px;
    }

    .tab-panel {
        padding-top: 8px;
    }

    .tab-button {
        padding: 6px 11px 7px;
        font-size: 15px;
    }

    .hero-snippet,
    .hero-recipe {
        padding: 8px 42px 8px 12px;
        font-size: 11.5px;
        line-height: 1.35;
    }
}

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