/* Shared look of the inner pages (documentation, release notes): the landing page's blue frame, header and type, with a left index and plain text. */
:root{
  --paper:#ffffff;
  --desk:#eef1f8;
  --ink:#0b0d14;
  --ink-2:#2a2f3e;
  --blue:#1d3b94;
  --blue-hi:#3a6fd8;
  --line:#b3b9cc;
  --tint:#eef1f8;
  --ring:rgba(58,111,216,.28);
  --gx:32px;
  --chrome:#c3c4c8;
  --chrome-lo:#7d7f87;
  --rule:#dde1ec;
  --mute:#525869;
  --display:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  --body:"Archivo","Segoe UI",Tahoma,Verdana,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--desk);scroll-padding-top:16px;-webkit-text-size-adjust:100%}
body{background:var(--desk);color:var(--ink);font:400 15px/1.65 var(--body);font-stretch:100%;padding-inline:16px;padding-block:20px 28px;margin:0;text-rendering:optimizeLegibility}
::selection{background:var(--blue);color:var(--paper)}
.frame{max-width:1040px;margin:0 auto;border:6px solid var(--blue);background:var(--paper);box-shadow:0 1px 2px rgba(18,39,106,.10),0 28px 56px -32px rgba(18,39,106,.45)}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(29,59,148,.38);transition:text-decoration-color .15s}
a:hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px;border-radius:2px}

/* header, same as the landing page */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:20px var(--gx) 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:60px;height:60px}
.word{font-family:var(--display);font-weight:900;font-size:52px;font-stretch:78%;letter-spacing:-.01em;line-height:1}
.word i{color:var(--blue);font-style:italic}
.word sup{font:400 .42em var(--body);color:var(--blue);vertical-align:top;margin-left:1px;position:relative;top:-.1em}
.stack{display:block;padding-top:15px}
.vin{position:relative}
.lab{font:italic 900 16px/1 var(--display);color:var(--blue);letter-spacing:.01em;position:absolute;left:0;bottom:100%;margin-bottom:-7px;white-space:nowrap}
.ver{display:flex;justify-content:space-between;align-items:baseline;gap:6px 24px;flex-wrap:wrap;margin:0 var(--gx);border-top:4px solid var(--blue);padding:12px 0 14px;font:800 20px/1.2 var(--display);font-stretch:88%;letter-spacing:-.005em;font-variant-numeric:tabular-nums;color:var(--blue)}
.nav{display:flex;gap:24px;font:600 15px/1.2 var(--body);font-stretch:100%;letter-spacing:0}
.nav a{text-decoration:none;padding-block:4px}
.nav a:hover,.nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* body: index on the left, text on the right */
.page{display:grid;grid-template-columns:190px minmax(0,1fr);gap:40px;padding:28px var(--gx) 56px}
.toc{font:14px/1.5 var(--body);position:sticky;top:16px;align-self:start}
.toc b{display:block;font:700 14px var(--body);margin-bottom:8px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.toc ol ol{padding-left:12px;margin-top:3px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
article{min-width:0;max-width:720px}
h1{font-family:var(--display);font-weight:900;font-size:40px;line-height:1;letter-spacing:-.03em;margin:0 0 6px}

.sub{color:var(--mute);margin:0 0 8px}
h2{font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:-.02em;line-height:1.1;margin:40px 0 12px;padding-top:20px;border-top:1px solid var(--rule)}
h3{font:700 16px var(--body);margin:24px 0 6px}
p,ul,ol{margin:0 0 12px}
ul,ol{padding-left:22px}
li{margin:2px 0}
code,kbd,pre{font-family:var(--mono);font-size:13px}
code{background:var(--tint);padding:1px 4px;border-radius:2px}
pre{background:var(--paper);padding:10px 12px;margin:0 0 12px;overflow-x:auto;line-height:1.45;box-shadow:inset 1px 1px 0 var(--chrome-lo),inset 2px 2px 0 var(--ink),inset -1px -1px 0 var(--chrome)}
pre code{background:none;padding:0}
kbd{display:inline-block;min-width:1.9em;padding:0 5px;text-align:center;font:700 11.5px/1.6 var(--body);color:var(--ink);background:var(--chrome);box-shadow:inset 1px 1px 0 var(--paper),inset -1px -1px 0 var(--ink),inset -2px -2px 0 var(--chrome-lo)}
.ui{font-weight:700}
table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 16px;border-top:1px solid var(--rule)}
th,td{text-align:left;vertical-align:top;padding:7px 12px 7px 0;border-bottom:1px solid var(--rule)}
th{font-weight:600}
td code{white-space:nowrap}
article a,article code{overflow-wrap:anywhere}
.note{border-left:3px solid var(--blue);padding:4px 0 4px 14px;margin:0 0 12px;color:var(--ink)}

/* release notes */
.rel{margin:0 0 22px}
.rel h2{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rel h2 small{font:400 14px var(--body);font-stretch:100%;color:var(--mute);letter-spacing:0}
.rel .dl{font:600 14px var(--body);font-stretch:100%;letter-spacing:0}

.foot{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:18px var(--gx);background:var(--blue);color:var(--paper);font-size:13px}
.foot .word{font-size:18px;color:var(--paper)}
.foot .word i{color:#b9cbff}
.foot a{color:var(--paper);text-decoration-color:rgba(255,255,255,.45)}
.foot a:hover{text-decoration-color:currentColor}
.foot a:focus-visible{outline-color:var(--paper)}

@media (max-width:760px){
  :root{--gx:18px}
  body{padding-inline:10px;padding-block:10px 20px}
  .frame{border-width:5px}
  .top{padding-block:14px 12px}
  .word{font-size:40px}
  table{display:block;overflow-x:auto}
  .page{grid-template-columns:minmax(0,1fr);padding-block:24px 36px;gap:20px}
  .tools{width:100%;grid-template-columns:auto minmax(0,1fr)!important}
  .tools label{text-align:left!important}
  .tools input{font-size:16px!important;height:40px!important}
  .toc{position:static}
  h1{font-size:32px}
  td code{white-space:normal}
}

/* large and very wide screens: the whole sheet grows, so nothing sits small in the middle */
@media (min-width:1700px){.frame{zoom:1.15}}
@media (min-width:2100px){.frame{zoom:1.35}}
@media (min-width:2700px){.frame{zoom:1.7}}
@media (min-width:3600px){.frame{zoom:2.2}}

/* search box, as on the landing page */
.tools{display:grid;grid-template-columns:auto minmax(0,224px);gap:8px 10px;align-items:center;font:13px/1.2 var(--body);color:var(--mute);margin:0}
.tools label{text-align:right}
.tools input{font:14px/1.2 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:0 8px;height:30px;width:100%;min-width:0;transition:border-color .15s,box-shadow .15s}
.tools input::placeholder{color:#8a90a2;opacity:1}
.tools input:hover{border-color:var(--blue)}
.tools input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
:target{animation:hit 1.6s}
@keyframes hit{from{background:#fff2a8}to{background:transparent}}

/* a sticky index taller than a short window scrolls on its own instead of being cut off */
@media (min-width:761px){.toc{max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}}

/* documentation on a PC: a wider sheet with the text in two columns, so the page is about half as long; the index stays in view */
@media (min-width:1180px){
  body:has(#api) .frame{max-width:1360px}
  body:has(#api) .page{grid-template-columns:210px minmax(0,1fr)}
  body:has(#api) .toc{max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:6px}
  body:has(#api) article{max-width:none;column-count:2;column-gap:56px}
  body:has(#api) article h1,body:has(#api) article .sub{column-span:all}
  body:has(#api) article h2,body:has(#api) article h3{break-after:avoid}
  body:has(#api) article table,body:has(#api) article pre,body:has(#api) article .note,body:has(#api) article li{break-inside:avoid}
}