:root{
  --bg:#0f1115;--fg:#d7dae0;--fg-strong:#f2f4f8;
  --header-bg:#161a21;--border:#2a2f3a;
  --link:#7cb7ff;--link-visited:#b49cff;--link-hover:#a8cfff;
  --code-bg:#1c2029;--code-fg:#e6c07b;
  --btn-bg:#1c2029;--btn-bg-hover:#252a35;--btn-border:#3a4150;--btn-border-hover:#4b5466;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#fafafa;--fg:#24292f;--fg-strong:#0d1117;
  --header-bg:#f0f2f5;--border:#d0d7de;
  --link:#0969da;--link-visited:#8250df;--link-hover:#0550ae;
  --code-bg:#eef1f4;--code-fg:#953800;
  --btn-bg:#fff;--btn-bg-hover:#f3f4f6;--btn-border:#d0d7de;--btn-border-hover:#afb8c1;
  color-scheme:light;
}
[hidden]{display:none!important}
body{margin:0;font:16px system-ui,sans-serif;background:var(--bg);color:var(--fg)}

.site-header{background:var(--header-bg);border-bottom:1px solid var(--border)}
.site-header .bar{max-width:40rem;margin:0 auto;padding:1rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.site-header h1{grid-column:2;margin:0;font-size:1.75rem;font-weight:600;letter-spacing:-.01em;text-align:center;color:var(--fg-strong)}
#theme-btn{grid-column:3;justify-self:end}

main{max-width:40rem;margin:2rem auto;padding:0 1rem;text-align:center}
/* endpoint list: centered as a block, but rows stay left-aligned so the paths and descriptions line up */
main ul{width:fit-content;max-width:100%;margin:1.5rem auto;padding:0;list-style:none;text-align:left}
main li{display:grid;grid-template-columns:7em 1fr;column-gap:.75em;align-items:baseline;padding:.2em 0}
main li>a{justify-self:end}
strong{color:var(--fg-strong)}
a{color:var(--link)}
a:visited{color:var(--link-visited)}
a:hover{color:var(--link-hover)}
code{background:var(--code-bg);color:var(--code-fg);border:1px solid var(--border);padding:.1em .3em;border-radius:3px}

button{background:var(--btn-bg);color:var(--fg);border:1px solid var(--btn-border);border-radius:6px;padding:.35em .8em;font:inherit;cursor:pointer}
button:hover{background:var(--btn-bg-hover);border-color:var(--btn-border-hover)}
button:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.icon-btn{padding:.4em;line-height:0}
.icon-btn svg{width:1.25em;height:1.25em}
.icon-moon,:root[data-theme=light] .icon-sun{display:none}
:root[data-theme=light] .icon-moon{display:inline}

/* button and UA text share one grid cell, and the button is only made invisible after the click,
   so the row keeps the button's real height and the list below doesn't jump */
.ua-row{display:grid;place-items:center}
.ua-row>*{grid-area:1/1}
#ua-btn.used{visibility:hidden}
#ua{overflow-wrap:anywhere}