/*
 * The book, dressed like the landing page.
 *
 * mdBook's `light` and `navy` themes are recoloured with the tokens from
 * site/assets/style.css: Nord on a near-white page, gold for the small marks,
 * and Nord dark. The three themes the page has no colours for are hidden from
 * the menu rather than restyled. Everything here is additive: `additional-css`
 * loads after the theme, so a selector that mdBook later renames falls back to
 * the stock look rather than breaking the page.
 */

:root {
    /* mdBook sets html to 62.5%, so 1rem is 10px. Sizes below are in px. */
    /* A reading column: about 80 characters of body text. */
    --content-max-width: 860px;
    --sidebar-target-width: 320px;
    --mono-font: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, "DejaVu Sans Mono", monospace;
    --sans-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --code-font-size: 0.86em;
    --gb-radius: 12px;
    --gb-radius-small: 8px;
}

/* ---------- the two themes ---------- */

.light {
    --bg: #F4F5F8;
    --fg: #1F2530;
    --gb-muted: #5B6577;
    --gb-card: #FFFFFF;
    --gb-line: #DDE2EA;
    --gb-gold: #EBCB8B;
    --gb-gold-ink: #2E3440;
    --gb-leaf: #C79A3B;
    --gb-water: #5E81AC;
    --gb-code-bg: #F8F9FB;
    --gb-shadow: 0 1px 2px rgba(31, 37, 48, 0.06), 0 12px 32px -18px rgba(31, 37, 48, 0.28);
    --gb-chrome: #E6E9EF;

    --sidebar-bg: #EEF0F4;
    --sidebar-fg: #3A4252;
    --sidebar-non-existant: #AAB2C0;
    --sidebar-active: #1F2530;
    --sidebar-spacer: #DDE2EA;
    --sidebar-header-border-color: #C79A3B;

    --scrollbar: #C3CBD9;
    --icons: #5B6577;
    --icons-hover: #1F2530;
    --links: #3B5F8F;
    --inline-code-color: #2E3440;

    --theme-popup-bg: #FFFFFF;
    --theme-popup-border: #DDE2EA;
    --theme-hover: #EAEDF2;

    --quote-bg: #FFFFFF;
    --quote-border: #DDE2EA;
    --table-border-color: #DDE2EA;
    --table-header-bg: #EAEDF2;
    --table-alternate-bg: #F9FAFC;

    --searchbar-border-color: #DDE2EA;
    --searchbar-bg: #FFFFFF;
    --searchbar-fg: #1F2530;
    --searchbar-shadow-color: #DDE2EA;
    --searchresults-header-fg: #5B6577;
    --searchresults-border-color: #DDE2EA;
    --searchresults-li-bg: #FFFFFF;
    --search-mark-bg: #EBCB8B;

    --blockquote-note-color: #5E81AC;
    --blockquote-tip-color: #7F9A68;
    --blockquote-important-color: #B48EAD;
    --blockquote-warning-color: #D08770;
    --blockquote-caution-color: #BF616A;
}

.navy {
    --bg: #2E3440;
    --fg: #ECEFF4;
    --gb-muted: #C3CBD9;
    --gb-card: #3B4252;
    --gb-line: #4A5468;
    --gb-gold: #EBCB8B;
    --gb-gold-ink: #2E3440;
    --gb-leaf: #EBCB8B;
    --gb-water: #88C0D0;
    --gb-code-bg: #2A303B;
    --gb-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 16px 40px -20px rgba(0, 0, 0, 0.6);
    --gb-chrome: #353C4A;

    --sidebar-bg: #272C36;
    --sidebar-fg: #C3CBD9;
    --sidebar-non-existant: #5B6577;
    --sidebar-active: #ECEFF4;
    --sidebar-spacer: #3B4252;
    --sidebar-header-border-color: #EBCB8B;

    --scrollbar: #4A5468;
    --icons: #C3CBD9;
    --icons-hover: #ECEFF4;
    --links: #88C0D0;
    --inline-code-color: #EBCB8B;

    --theme-popup-bg: #3B4252;
    --theme-popup-border: #4A5468;
    --theme-hover: #434C5E;

    --quote-bg: #3B4252;
    --quote-border: #4A5468;
    --table-border-color: #4A5468;
    --table-header-bg: #3B4252;
    --table-alternate-bg: #333A48;

    --searchbar-border-color: #4A5468;
    --searchbar-bg: #3B4252;
    --searchbar-fg: #ECEFF4;
    --searchbar-shadow-color: #272C36;
    --searchresults-header-fg: #C3CBD9;
    --searchresults-border-color: #4A5468;
    --searchresults-li-bg: #3B4252;
    --search-mark-bg: #5E81AC;

    --blockquote-note-color: #88C0D0;
    --blockquote-tip-color: #A3BE8C;
    --blockquote-important-color: #B48EAD;
    --blockquote-warning-color: #EBCB8B;
    --blockquote-caution-color: #BF616A;
}

/* Only the two themes the page has colours for. */
#mdbook-theme-list li:has(#mdbook-theme-rust),
#mdbook-theme-list li:has(#mdbook-theme-coal),
#mdbook-theme-list li:has(#mdbook-theme-ayu) {
    display: none;
}

/* ---------- type ---------- */

html, body, .menu-title, .sidebar {
    font-family: var(--sans-font);
}
body {
    -webkit-font-smoothing: antialiased;
    font-size: 16.5px;
    text-rendering: optimizeLegibility;
}
.content main {
    line-height: 1.7;
    padding-inline: 8px;
    padding-block-end: 48px;
}
.content main > p,
.content main > ul,
.content main > ol {
    color: color-mix(in srgb, var(--fg) 92%, var(--bg));
}
.content ::selection {
    background: color-mix(in srgb, var(--gb-gold) 55%, transparent);
}
.content h1 {
    margin-block-start: 0.6em;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin-block-end: 0.7em;
}
.content h1::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin-top: 14px;
    border-radius: 999px;
    background: var(--gb-gold);
}
.content h2 {
    font-size: 28px;
    font-weight: 680;
    letter-spacing: -0.022em;
    line-height: 1.25;
    margin-block-start: 2.4em;
    padding-block-start: 1.1em;
    border-top: 1px solid var(--gb-line);
}
.content h1 + h2,
.content .gb-lede + h2 {
    border-top: 0;
    padding-block-start: 0;
}
.content :is(h2, h3, h4) a.header {
    color: inherit;
}
.content :is(h2, h3) a.header:hover::after {
    content: " #";
    color: var(--gb-leaf);
    font-weight: 500;
}
.content h3 {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-block-start: 1.8em;
}
.content h4 {
    font-size: 15px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gb-muted);
}
/* A widget's heading is its node name, set as a chip. */
.content h2 code,
.content h3 code {
    font-size: 0.8em;
    padding: 0.15em 0.5em;
    border-radius: 999px;
    border: 1px solid var(--gb-line);
    background: var(--gb-card);
    color: var(--fg);
    vertical-align: 0.1em;
}
.content p > code,
.content li > code,
.content td > code,
.content th > code {
    padding: 0.1em 0.35em;
    border-radius: 5px;
    background: color-mix(in srgb, var(--gb-line) 55%, transparent);
    color: var(--inline-code-color);
    font-size: 0.86em;
}
.content a {
    color: var(--links);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    transition: text-decoration-color 0.15s ease;
}
.content a:hover {
    text-decoration-color: var(--gb-gold);
    text-decoration-thickness: 2px;
}
.content hr {
    border: 0;
    border-top: 1px solid var(--gb-line);
    margin-block: 2.5em;
}

/* ---------- code ---------- */

.content pre {
    border-radius: var(--gb-radius);
    border: 1px solid var(--gb-line);
    background: var(--gb-code-bg);
    line-height: 1.55;
}
.content pre > code.hljs,
.content pre > code {
    background: transparent;
    font-size: 14px;
}
.content pre > code {
    padding: 18px 20px;
}
.content pre > .buttons {
    top: 6px;
    right: 6px;
}
.content pre > .buttons button {
    border-radius: 8px;
}

/* ---------- tables ---------- */

.content table {
    font-size: 15px;
    background: var(--gb-card);
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius);
    overflow: hidden;
    margin-block: 1.4em;
    width: 100%;
}
.content table td,
.content table th {
    border: 0;
    border-top: 1px solid var(--gb-line);
    padding: 9px 14px;
    vertical-align: top;
    line-height: 1.5;
}
.content table td > code {
    white-space: nowrap;
}
.content table thead th {
    border-top: 0;
    background: var(--table-header-bg);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gb-muted);
    text-align: left;
}
.content table tbody tr:nth-child(2n) {
    background: var(--table-alternate-bg);
}

/* ---------- callouts ---------- */

.content blockquote {
    margin-block: 1.4em;
    padding: 0.9em 1.2em;
    border-radius: var(--gb-radius);
    border: 1px solid var(--quote-border);
    border-inline-start: 4px solid var(--gb-gold);
    background: var(--quote-bg);
}
.content blockquote p {
    margin-block: 0.4em;
}
.content blockquote .blockquote-tag-title {
    font-weight: 650;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.content blockquote.blockquote-tag {
    background: color-mix(in srgb, var(--quote-bg) 88%, var(--gb-line));
}
.content blockquote.note      { border-inline-start-color: var(--blockquote-note-color); }
.content blockquote.tip       { border-inline-start-color: var(--blockquote-tip-color); }
.content blockquote.important { border-inline-start-color: var(--blockquote-important-color); }
.content blockquote.warning   { border-inline-start-color: var(--blockquote-warning-color); }
.content blockquote.caution   { border-inline-start-color: var(--blockquote-caution-color); }

/* ---------- pictures ---------- */

.content img {
    border-radius: var(--gb-radius);
    border: 1px solid var(--gb-line);
}
.content figure {
    margin: 1.6em 0;
}
.content figcaption {
    margin-top: 0.5em;
    font-size: 15px;
    color: var(--gb-muted);
}

/* ---------- the sidebar ---------- */

.sidebar {
    font-size: 15px;
}
.sidebar .chapter li.part-title {
    margin-top: 1.6em;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gb-muted);
}
.sidebar .chapter li a {
    display: block;
    padding: 4px 8px;
    margin-inline: -8px;
    border-radius: 4px;
    transition: background-color 0.12s ease;
}
.sidebar .chapter li a:hover {
    background: color-mix(in srgb, var(--gb-line) 50%, transparent);
    text-decoration: none;
}
.sidebar .chapter li a.active {
    font-weight: 650;
    color: var(--sidebar-active);
    background: color-mix(in srgb, var(--gb-gold) 30%, transparent);
    box-shadow: inset 3px 0 0 var(--gb-leaf);
}
/* The headings of the open chapter: quieter than the chapters around them. */
.sidebar .chapter li.header-item {
    font-size: 14px;
    margin-block-end: 0.15em;
}
.sidebar .chapter li.header-item a {
    color: var(--gb-muted);
}
.sidebar .chapter li.header-item a.current-header {
    color: var(--sidebar-active);
}
.sidebar .on-this-page {
    margin-left: 12px;
    border-inline-start-width: 2px;
}
.sidebar .chapter .section {
    margin-inline-start: 0.4em;
}
.menu-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}
.menu-bar.sticky,
.menu-bar.sticky.bordered {
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    background: color-mix(in srgb, var(--bg) 84%, transparent);
}

/* ---------- the header, as the landing page has it ---------- */

/* goldberry.js replaces mdBook's centred title with the brand, the six parts
   of the guide and a GitHub link. mdBook's own buttons stay at both ends. */
#mdbook-menu-bar.gb-bar {
    align-items: center;
    min-height: var(--menu-bar-height);
    gap: 4px;
}
.gb-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-inline: 4px 12px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--fg) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.gb-brand svg {
    color: var(--gb-leaf);
    flex: none;
    transition: transform 0.3s ease;
}
.gb-brand:hover svg {
    transform: rotate(-12deg);
}
.gb-brand em {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--gb-line);
    color: var(--gb-muted);
}
.gb-nav {
    display: flex;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.gb-nav a {
    color: var(--gb-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.gb-nav a:hover,
.gb-nav a[aria-current="true"] {
    color: var(--fg);
    background: color-mix(in srgb, var(--gb-line) 55%, transparent);
}
.gb-nav a[aria-current="true"] {
    background: color-mix(in srgb, var(--gb-gold) 35%, transparent);
}
.gb-github {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    margin-inline: 8px 2px;
    border-radius: 999px;
    border: 1px solid var(--gb-line);
    background: var(--gb-card);
    color: var(--fg) !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.gb-github:hover {
    transform: translateY(-1px);
    border-color: var(--gb-muted);
}

/* ---------- no page arrows ---------- */

/* The arrows at both sides of the page, and the pair at the foot on a narrow
   screen. The sidebar and the keyboard still turn pages. */
.nav-wide-wrapper,
.nav-wrapper {
    display: none !important;
}

/* ---------- blocks the guide writes in HTML ---------- */

/* <p class="gb-lede">A one-sentence summary under the title.</p> */
.gb-lede {
    font-size: 20px;
    line-height: 1.55;
    color: var(--gb-muted);
    max-width: 44em;
}

/* <div class="gb-cards"><a class="gb-card" href="..."><strong>Title</strong><span>Text</span></a>...</div> */
.gb-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-block: 1.6em;
}
.gb-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border-radius: var(--gb-radius);
    border: 1px solid var(--gb-line);
    background: var(--gb-card);
    color: var(--fg) !important;
    text-decoration: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.gb-card:hover {
    transform: translateY(-2px);
    border-color: var(--gb-leaf);
    box-shadow: 0 18px 40px -28px rgba(31, 37, 48, 0.5);
}
.gb-card strong {
    font-weight: 650;
    letter-spacing: -0.01em;
}
.gb-card span {
    font-size: 15px;
    color: var(--gb-muted);
    line-height: 1.45;
}
.gb-card code {
    font-size: 0.82em;
}

/* <div class="gb-shot">
     <img class="gb-light" src="../images/button-light.webp" width="640" alt="...">
     <img class="gb-dark" src="../images/button-dark.webp" width="640" alt="...">
     <p>caption</p>
   </div>
   A screenshot of the toolkit's own UI, framed as a window: a title bar with
   the three lights, the picture, then the caption. The frame hugs the picture
   and sits at the start of the column, like the text around it.

   Two pictures, one per theme, and the page shows the one that matches: mdBook
   puts the theme's name on <html>, and `navy` is the dark one. A picture is
   taken at 2x and carries its logical width, so it is drawn at the size the
   widget has on screen and stays sharp on a dense display. A picture with no
   width -- a whole screen -- shrinks to the column and is never stretched past
   its own pixels. lightbox.js opens either at full size on a click. */
.gb-shot {
    position: relative;
    width: fit-content;
    min-width: min(320px, 100%);
    max-width: 100%;
    margin: 1.8em 0;
    border-radius: var(--gb-radius);
    overflow: hidden;
    border: 1px solid var(--gb-line);
    background: var(--bg);
    box-shadow: var(--gb-shadow);
}
.gb-shot::before {
    content: "Screenshot";
    display: block;
    height: 30px;
    padding-inline-start: 66px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 30px;
    color: var(--gb-muted);
    border-bottom: 1px solid var(--gb-line);
    background:
        radial-gradient(circle at 16px 50%, #BF616A 0 5px, transparent 5.5px),
        radial-gradient(circle at 33px 50%, #EBCB8B 0 5px, transparent 5.5px),
        radial-gradient(circle at 50px 50%, #A3BE8C 0 5px, transparent 5.5px),
        var(--gb-chrome);
}
.gb-shot.gb-zoomable::after {
    content: "Click to enlarge";
    position: absolute;
    top: 0;
    right: 12px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: var(--gb-muted);
    pointer-events: none;
}
.gb-shot img {
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
}
.gb-shot.gb-zoomable img {
    cursor: zoom-in;
}
.gb-shot.gb-zoomable img:focus-visible {
    outline: 3px solid var(--gb-water);
    outline-offset: -3px;
}
.gb-shot .gb-dark {
    display: none;
}
html.navy .gb-shot .gb-light {
    display: none;
}
html.navy .gb-shot .gb-dark {
    display: block;
}
.gb-shot p {
    margin: 0;
    padding: 10px 14px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--gb-muted);
    background: var(--gb-card);
    border-top: 1px solid var(--gb-line);
}

/* The full-size view lightbox.js opens over the page. */
html.gb-lightbox-open {
    overflow: hidden;
}
.gb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 32px;
    background: color-mix(in srgb, #1B1F27 82%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: zoom-out;
    animation: gb-fade 0.16s ease-out;
}
.gb-lightbox figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.gb-lightbox img {
    display: block;
    max-width: calc(100vw - 64px);
    max-height: calc(100vh - 120px);
    width: auto;
    height: auto;
    border-radius: var(--gb-radius-small);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
    background: var(--bg);
}
.gb-lightbox figcaption {
    max-width: 70ch;
    font-size: 15px;
    color: #D8DEE9;
    text-align: center;
}
.gb-lightbox button {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(46, 52, 64, 0.85);
    color: #ECEFF4;
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.gb-lightbox button:focus-visible {
    outline: 2px solid var(--gb-gold);
    outline-offset: 2px;
}
@keyframes gb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .gb-lightbox { animation: none; }
}

/* <span class="gb-pill">status</span> */
.gb-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--gb-gold) 35%, transparent);
    color: var(--fg);
    vertical-align: middle;
}
.gb-pill.built   { background: color-mix(in srgb, #A3BE8C 40%, transparent); }
.gb-pill.partial { background: color-mix(in srgb, #EBCB8B 45%, transparent); }
.gb-pill.absent  { background: color-mix(in srgb, #BF616A 35%, transparent); }

/* <div class="gb-stats"><div><b>1.0</b><i>ms</i><span>a frame</span></div>...</div> */
.gb-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-block: 1.6em;
}
.gb-stats > div {
    padding: 16px 18px;
    border-radius: var(--gb-radius);
    border: 1px solid var(--gb-line);
    background: var(--gb-card);
}
.gb-stats b {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.gb-stats i {
    font-style: normal;
    font-size: 17px;
    margin-inline-start: 4px;
    color: var(--gb-muted);
}
.gb-stats span {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    color: var(--gb-muted);
    line-height: 1.4;
}

/* <div class="gb-steps"><div><b>1</b><p>...</p></div></div> */
.gb-steps {
    counter-reset: gb-step;
    margin-block: 1.4em;
}
.gb-steps > div {
    position: relative;
    padding: 4px 0 18px 48px;
    border-inline-start: 2px solid var(--gb-line);
    margin-inline-start: 16px;
}
.gb-steps > div::before {
    counter-increment: gb-step;
    content: counter(gb-step);
    position: absolute;
    left: -17px;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
    background: var(--gb-gold);
    color: var(--gb-gold-ink);
}
.gb-steps > div > p:first-child {
    margin-top: 4px;
}

/* <div class="gb-tabs">

   ```kdl ... ```

   ```java ... ```

   </div>
   The same thing said two or three ways, one way per tab. goldberry.js builds
   the tab bar from the fences' languages, and remembers the last language a
   reader picked across the whole book. Until the script has run, and without
   it, every sample is shown in turn. */
.gb-tabs {
    margin-block: 1.4em;
    border-radius: var(--gb-radius);
    border: 1px solid var(--gb-line);
    background: var(--gb-card);
    overflow: hidden;
}
.gb-tablist {
    display: flex;
    gap: 2px;
    padding: 6px 8px 0;
    border-bottom: 1px solid var(--gb-line);
    background: var(--table-header-bg);
}
.gb-tablist button {
    appearance: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--gb-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.gb-tablist button:hover {
    color: var(--fg);
}
.gb-tablist button[aria-selected="true"] {
    color: var(--fg);
    border-bottom-color: var(--gb-gold);
}
.gb-tablist button:focus-visible {
    outline: 2px solid var(--gb-water);
    outline-offset: -2px;
    border-radius: 6px;
}
.gb-tabs > pre {
    margin: 0;
    border: 0;
    border-radius: 0;
}
.gb-tabs > pre + pre {
    border-top: 1px solid var(--gb-line);
}
.gb-tabs.gb-ready > pre {
    display: none;
    border-top: 0;
}
.gb-tabs.gb-ready > pre.gb-active {
    display: block;
}

@media (max-width: 1500px) {
    .gb-brand em { display: none; }
}
@media (max-width: 720px) {
    .content h1 { font-size: 30px; }
    .gb-nav, .gb-github { display: none; }
}

@media print {
    .gb-card, .gb-shot, .gb-stats > div { box-shadow: none; }
    .gb-shot.gb-zoomable::after { content: none; }
}

/* ---------- the foot of every page ---------- */

/* Written by goldberry.js under the chapter: the privacy policy and the
   cookie settings, which live on the landing page. */
.gb-foot {
    margin-top: 64px;
    padding-top: 16px;
    border-top: 1px solid var(--gb-line);
    font-size: 14px;
    color: var(--gb-muted);
}

.gb-foot a {
    color: inherit;
}