@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/font/IBMPlexSans.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/font/IBMPlexSerif-500.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  --paper: #ffffff;
  --ink: #141414;
  --highlighter: #8fd3ff;
  --wash: #e3f4ff;
  --biro: #1b3a8a;
  --graphite: #6b6b6b;
  --rule: #eaeaea;
  --ink-soft: #444444;
  --pencil: #8c8c8c;
  --paper-dim: #b5b5b5;
  --rule-strong: #d4d4d4;
  --rule-faint: #f3f3f3;
  --shadow: rgb(20 20 20 / .1);
  --bar: var(--biro);

  --good: #0e7a4a;
  --good-bg: #e2f3e9;
  --ni: #9a5b00;
  --ni-bg: #fcefd6;
  --ni-bar: #e0a43a;
  --poor: #bf3328;
  --poor-bg: #fbe4e1;
  --client-error: #a86400;
  --server-error: #c43329;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  --text-xs: .75rem;
  --text-sm: .85rem;
  --text-md: .9rem;
  --text-body: .95rem;
  --text-lg: 1rem;
  --text-xl: 1.05rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141414;
    --ink: #ebebeb;
    --highlighter: #1a5b85;
    --wash: #17293a;
    --biro: #93aef5;
    --graphite: #949494;
    --rule: #2b2b2b;
    --ink-soft: #bbbbbb;
    --pencil: #737373;
    --paper-dim: #4a4a4a;
    --rule-strong: #3d3d3d;
    --rule-faint: #1f1f1f;
    --shadow: rgb(0 0 0 / .5);
    --good: #4cc28a;
    --good-bg: #15301f;
    --ni: #e0a43a;
    --ni-bg: #33260f;
    --ni-bar: #e0a43a;
    --poor: #f07466;
    --poor-bg: #3a1a17;
    --client-error: #d9953a;
    --server-error: #ee6c5f;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

@property --lined { syntax: '<number>'; inherits: false; initial-value: 0 }
::selection { background: var(--highlighter); color: var(--ink); text-shadow: none }
:where(a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px }
a { --lined: 1 }
a, .brand span, .account-nav button, .head :is(h2, h3), .back .site-text, .site-link span, .ledger.beta .c-site .t,
:is(.zone-here, .own) button {
  --line-colour: currentColor; --line-top: calc(1.025em + 1px); --line-start: 0px;
  --halo: color-mix(in srgb, var(--ground, var(--paper)) calc(var(--lined, 0) * 100%), transparent);
  text-decoration-line: none;
  background-image: linear-gradient(var(--line-colour), var(--line-colour));
  background-repeat: no-repeat; background-origin: content-box;
  background-position: left var(--line-start) top var(--line-top);
  background-size: calc(100% - var(--line-start)) calc(var(--lined, 0) * 1px);
  text-shadow: .5px 0 var(--halo), -.5px 0 var(--halo), 1px 0 var(--halo), -1px 0 var(--halo),
               1.5px 0 var(--halo), -1.5px 0 var(--halo), 2px 0 var(--halo), -2px 0 var(--halo);
}

.wrap { margin: 0 auto; padding: 1.5rem 1.5rem 2rem }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
          border-bottom: 1px solid var(--rule); padding-bottom: 1rem; margin-bottom: 1.75rem }
.brand { display: inline-flex; align-items: center; gap: .5rem;
         --lined: 0; color: var(--ink) }
.brand img { width: 30px; height: 21px }
.brand span { font-size: var(--text-xl); font-weight: 500; letter-spacing: .02em }
.brand:hover span { --lined: 1 }

.foot { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--rule);
        display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: var(--text-sm) }
.foot a, .page-nav a, .account-nav a, .account-nav button, .crumbs a, .prose .crumbs a, .view-crumbs a, .more .see-all,
.bots-docs a, .top-links a { color: var(--graphite); --lined: 0 }
.foot a:hover, .page-nav a:hover, .account-nav a:hover, .account-nav button:hover, .crumbs a:hover, .prose .crumbs a:hover,
.view-crumbs a:hover, .more .see-all:hover, .bots-docs a:hover, .top-links a:hover { color: var(--ink); --lined: 1 }
.foot a { padding: .2rem 0 }
.foot .made { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; padding: .2rem 0; color: var(--graphite) }
.foot .made img { width: 16px; height: 12px; object-fit: cover; border-radius: 2px }

.snippet { position: relative }
.snippet pre, pre.command { margin: 0; padding: .7rem .85rem; white-space: pre-wrap; overflow-wrap: anywhere;
                            background: var(--rule-faint); border: 1px solid var(--rule); border-radius: 6px;
                            font-size: var(--text-sm); line-height: 1.5; color: var(--ink) }
.snippet:has(> .copy) pre { padding-right: 2.75rem }
.snippet > .copy { position: absolute; top: .45rem; right: .45rem; display: grid; place-items: center; width: 28px;
                   height: 28px; padding: 0; color: var(--graphite); background: none; border: 0; border-radius: 4px;
                   cursor: pointer; transition: background-color .12s, color .12s; --copy-mask: url("/img/ui/copy.svg") }
.snippet > .copy.copied { --copy-mask: url("/img/ui/copied.svg"); color: var(--ink) }
.snippet > .copy::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--copy-mask) 0 0 / 100% 100% no-repeat; mask: var(--copy-mask) 0 0 / 100% 100% no-repeat }
.snippet > .copy:hover { background: var(--highlighter); color: var(--ink) }
.snippet > .copy:focus-visible { outline-offset: 1px }
@media (prefers-reduced-motion: reduce) { .snippet > .copy { transition: none } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
.skip { position: absolute; top: .75rem; left: .75rem; z-index: 10; padding: .45rem .8rem; border-radius: 6px;
        background: var(--ink); color: var(--paper); font-weight: 500; --lined: 0 }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap }

.field input, .field select, .checker input, .join input, .find input[type="search"] {
  min-width: 0; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--pencil); border-radius: 6px; -webkit-appearance: none; appearance: none }
.field input::placeholder, .checker input::placeholder, .join input::placeholder, .find input::placeholder { color: var(--graphite) }
.field input:hover, .field select:hover, .checker input:hover, .join input:hover, .find input:hover,
.picker-field input:hover, .picker-n input:hover { border-color: var(--graphite) }
.field input:focus, .field select:focus, .checker input:focus, .join input:focus, .find input:focus, .picker-n input:focus,
.picker-field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) }
.field input[aria-invalid="true"], .checker input[aria-invalid="true"], .join input[aria-invalid="true"] { border-color: var(--poor) }
.field input[aria-invalid="true"]:focus, .checker input[aria-invalid="true"]:focus,
.join input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--poor) }

.button, .checker button, .join button { flex: none; font: inherit; font-weight: 500; color: var(--paper); background: var(--ink);
                                         border: 1px solid var(--ink); border-radius: 6px; cursor: pointer }
.button:hover, .checker button:hover, .join button:hover { background: var(--ink-soft); border-color: var(--ink-soft) }

.find { position: relative; display: flex }
.find input::-webkit-search-decoration { -webkit-appearance: none }
.find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 10px; height: 10px;
  margin: 0 0 0 .5rem; cursor: pointer; background: var(--graphite);
  -webkit-mask: url("/img/ui/clear.svg") 0 0 / 100% 100% no-repeat; mask: url("/img/ui/clear.svg") 0 0 / 100% 100% no-repeat }
.find input::-webkit-search-cancel-button:hover { background: var(--ink) }
.find-icon { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--graphite); pointer-events: none }

.toc { display: none }
@media (min-width: 1000px) {
  .toc { display: block; float: right; width: 13rem; margin: .3rem 0 0;
         position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto }
}
.toc[hidden] { display: none }
.toc ol { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 1px solid var(--rule) }
nav.toc li { display: block; margin: 0 0 .5rem; padding: 0; border: 0; font-size: var(--text-body); line-height: 1.4 }
.toc ol ol { border-left: 0; margin: .5rem 0 0 }
nav.toc a { display: block; color: var(--graphite); --lined: 0 }
.toc a:hover { color: var(--ink) }
.toc a[aria-current] { color: var(--ink); font-weight: 500 }
.toc-bar { position: absolute; top: 0; left: 0; width: 2px; height: 0; background: var(--ink); opacity: 0;
           pointer-events: none; transition: transform .25s ease, height .25s ease, opacity .15s }
.toc-bar.on { opacity: 1 }
@media (prefers-reduced-motion: reduce) { .toc-bar { transition: none } }
.toc a:focus-visible { border-radius: 2px }