/* Scale the whole layout (all sizes are rem) so content fills about half the window width on large screens.
   Percentages are relative to the user's browser font size, so their setting still applies; capped at 175%. */
html { font-size: clamp(100%, .834vw, 175%); }
:root {
  --bg: #fafaf8; --fg: #1d1d1f; --muted: #5c5c63; --card: #ffffff;
  --border: #e2e2dc; --accent: #2f5fd0; --accent-fg: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15161a; --fg: #ececf0; --muted: #a0a0aa; --card: #1d1f25;
    --border: #2d3039; --accent: #7aa2ff; --accent-fg: #0e1220;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
header.site {
  border-bottom: 1px solid var(--border); background: var(--card);
  position: sticky; top: 0; z-index: 10;
}
header.site .inner {
  max-width: 60rem; margin: 0 auto; padding: .75rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between;
}
header.site .brand { font-weight: 700; font-size: 1.15rem; color: var(--fg); text-decoration: none; }
header.site nav { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
header.site nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
header.site nav a:hover { color: var(--accent); }
main { max-width: 60rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
section { margin: 0 0 3rem; scroll-margin-top: 4.5rem; }
h1 { font-size: 2.4rem; line-height: 1.2; margin: 0 0 .5rem; }
h2 { font-size: 1.5rem; margin: 0 0 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 42rem; }
.hero { padding: 1.5rem 0 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: .6rem; padding: 1.1rem 1.25rem; }
.card h3 { margin-top: 0; }
.card p { margin: 0; color: var(--muted); }
.btn {
  display: inline-block; padding: .65rem 1.2rem; border-radius: .5rem; font: inherit; font-weight: 600;
  background: var(--accent); color: var(--accent-fg); border: 0; text-decoration: none; cursor: pointer;
}
.btn[disabled], .btn.disabled { opacity: .55; cursor: not-allowed; }
.downloads { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 .5rem; }
.note { color: var(--muted); font-size: .9rem; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
code { background: var(--card); border: 1px solid var(--border); border-radius: .3rem; padding: .05rem .3rem; }
pre.block {
  background: var(--card); border: 1px solid var(--border); border-radius: .5rem;
  padding: .9rem 1rem; overflow-x: auto;
}
pre.block code { border: 0; padding: 0; background: none; }
pre.doc {
  background: var(--card); border: 1px solid var(--border); border-radius: .5rem;
  padding: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; line-height: 1.5;
}
img { max-width: 100%; height: auto; border-radius: .5rem; border: 1px solid var(--border); }
.placeholder { border: 1px dashed var(--border); border-radius: .6rem; padding: 1rem 1.25rem; color: var(--muted); }
footer.site { border-top: 1px solid var(--border); color: var(--muted); font-size: .9rem; }
footer.site .inner { max-width: 60rem; margin: 0 auto; padding: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
footer.site a { color: var(--muted); }
/* third-party notices viewer (third-party.js) */
.tp-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: 1.25rem 0; }
.tp-bar select { font: inherit; padding: .4rem .6rem; min-width: 0; max-width: 100%; flex: 1 1 16rem;
  background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: .3rem; }
.tp-modes { display: flex; gap: .4rem; flex-wrap: wrap; }
.tp-modes button { font: inherit; font-size: .9rem; padding: .35rem .8rem; cursor: pointer; background: transparent;
  color: var(--fg); border: 1px solid var(--border); border-radius: .3rem; }
.tp-modes button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.tp-meta { margin: 0 0 1.25rem; color: var(--muted); }
.tp-meta div { margin: 0; }
.tp-text p { margin: 0 0 1rem; overflow-wrap: anywhere; }
.tp-text p.keep { white-space: pre-line; }
.tp-text pre { margin: 0 0 1rem; padding: 0; background: none; border: 0; overflow-x: auto; font-size: .85rem; line-height: 1.5; }
.tp-text h3 { margin-top: 1.75rem; }
.tp-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
#tp-view pre.doc { border: 0; background: none; padding-left: 0; padding-right: 0; }

.aside { display: block; }
code { overflow-wrap: anywhere; }