:root {
  --bg: #fbfbfa; --raise: #ffffff; --ink: #111214; --muted: #5b5d66; --faint: #767883; --rule: #e3e3e0; --soft: #efefec; --ring: #bdbdb8;
  --c-page: #495057; --c-block: #0b7285; --c-line: #1864ab; --c-span: #5f3dc4; --c-chars: #e03131; --hl: #ffe3e3; --tint: #f4f1ff;
  --sans: Inter, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111214; --raise: #191a1d; --ink: #ececee; --muted: #a3a5ae; --faint: #868892; --rule: #2b2c31; --soft: #1f2024; --ring: #4a4b52;
    --c-page: #adb5bd; --c-block: #3bc9db; --c-line: #74c0fc; --c-span: #b197fc; --c-chars: #ff8787; --hl: #4a1f22; --tint: #201c33;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p a, .foot a:hover, nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, .mono { font-family: var(--mono); font-size: .9em; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

header { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.logo { font: 600 18px var(--mono); letter-spacing: -.02em; }
nav { display: flex; gap: 26px; font-size: 14.5px; color: var(--muted); }

.hero { padding: 64px 0 0; }
h1 { margin: 0 0 20px; font: 600 clamp(40px, 6.2vw, 68px)/1.02 var(--sans); letter-spacing: -.04em; max-width: 14ch; }
.lede { margin: 0 0 28px; font-size: 19px; color: var(--muted); max-width: 34em; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
button { font: inherit; cursor: pointer; }
.cta { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: var(--bg); border: 0; border-radius: 10px; padding: 13px 18px; font-weight: 600; }
.cta:hover { opacity: .86; }
.cta svg { width: 17px; height: 17px; }
.install { font: 14.5px var(--mono); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 16px; background: var(--raise); }
.install:hover { border-color: var(--ink); }
details.copies { margin-top: 14px; font-size: 13.5px; color: var(--faint); max-width: 560px; }
details.copies summary { cursor: pointer; width: fit-content; }
details.copies p { margin: 10px 0 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--raise); color: var(--muted); font: 13px/1.6 var(--mono); }

/* the address: one real page, live */
.live { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; margin: 72px 0 0; align-items: start; }
.pageview { margin: 0; }
.pageview .crop { --c-block: #0b7285; --c-line: #1864ab; --c-chars: #e03131; aspect-ratio: 324 / 232; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px var(--rule), 0 18px 50px rgba(0,0,0,.08); background: #fff; }
.paper { position: relative; width: calc(100% * 396.5 / 324); margin: calc(-100% * 28 / 324) 0 0 calc(-100% * 40 / 324); }
.paper img { display: block; width: 100%; height: auto; }
.paper > div { position: absolute; }
.paper .marks { inset: 0; pointer-events: none; }
.paper .marks > div { position: absolute; pointer-events: auto; }
.paper .hot { cursor: pointer; border-radius: 2px; }
.paper .hot:focus-visible { outline: 2px solid var(--c-line); }
.paper .b-block { border: 2px dashed var(--c-block); border-radius: 5px; pointer-events: none; }
.paper .b-line { border: 2px solid var(--c-line); border-radius: 3px; pointer-events: none; box-shadow: 0 2px 0 -0px transparent; }
.paper .hit { background: color-mix(in srgb, var(--c-chars) 22%, transparent); border-bottom: 2px solid var(--c-chars); cursor: pointer; z-index: 2; }
.paper .hit.on { background: color-mix(in srgb, var(--c-chars) 45%, transparent); }
.pageview figcaption { position: relative; padding-top: 12px; font-size: 12.5px; color: var(--faint); }
.side { min-width: 0; padding-top: 6px; }
.id { display: flex; flex-wrap: nowrap; gap: .1em; font: 600 clamp(24px, 4.3vw, 48px)/1.5 var(--mono); letter-spacing: -.03em; }
.id div { border-bottom: 3px solid; transition: opacity .15s; }
.id div.off { opacity: .28; }
.id small { display: block; font: 400 12px/1 var(--sans); letter-spacing: 0; color: var(--muted); padding: 10px 0 0; margin-bottom: -24px; }
.side p { margin: 48px 0 22px; color: var(--muted); font-size: 17px; max-width: 30em; }
.find { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.find label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.find input { font: 15px var(--sans); color: var(--ink); background: var(--raise); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 14px; width: 210px; }
.find input:focus { outline: 2px solid var(--c-chars); outline-offset: 1px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { font-size: 13px; color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 99px; padding: 5px 11px; }
.chips button:hover { color: var(--ink); border-color: var(--ink); }
.count { font-size: 13px; color: var(--faint); flex-basis: 100%; min-height: 1.4em; }
.out { margin: 0 0 10px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 10px; background: var(--raise); font: 13px/1.6 var(--mono); overflow-x: auto; min-height: 150px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; background: var(--ink); color: var(--bg); border-radius: 10px; padding: 14px 18px; font: 13.5px var(--mono); }
.cmd i { font-style: normal; opacity: .5; }
html:not(.js) .find { display: none; }
@media (max-width: 900px) {
  .live { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 56px; }
  .pageview { max-width: 460px; }
  .id small { font-size: 11px; }
  .id { gap: .16em; }
}

section { padding: 112px 0 0; }
h2 { margin: 0 0 12px; font: 600 clamp(26px, 3.6vw, 36px)/1.12 var(--sans); letter-spacing: -.03em; max-width: 20em; }
.sub { margin: 0; color: var(--muted); max-width: 34em; font-size: 17.5px; }
.cap { margin: 18px 0 0; font-size: 13.5px; color: var(--faint); max-width: 34em; }

/* tables */
table { border-collapse: separate; border-spacing: 0; width: 100%; max-width: 760px; margin-top: 36px; }
th, td { border-top: 1px solid var(--rule); padding: 15px 8px; text-align: center; vertical-align: middle; }
thead th { border-top: 0; font-weight: 500; font-size: 13px; line-height: 1.3; color: var(--muted); vertical-align: bottom; padding-bottom: 14px; }
thead th.us { color: var(--ink); font: 600 14px var(--mono); background: var(--tint); border-radius: 12px 12px 0 0; padding-top: 16px; }
tbody th { text-align: left; font-weight: 500; padding-left: 0; }
tbody th small { display: block; font-weight: 400; font-size: 13.5px; color: var(--muted); }
td { width: 104px; }
td.us { background: var(--tint); }
tbody tr:last-child td.us { border-radius: 0 0 12px 12px; }
.dot { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--ring); vertical-align: middle; }
.dot.y { background: var(--ink); border-color: var(--ink); }
.dot.h { border-color: var(--ink); background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.us .dot.y { background: var(--c-span); border-color: var(--c-span); }
.us .dot.h { border-color: var(--c-span); background: linear-gradient(90deg, var(--c-span) 50%, transparent 50%); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 620px) { td { width: 58px; padding: 13px 2px; } thead th { font-size: 11.5px; } tbody th small { display: none; } }

.foot { margin-top: 120px; padding: 26px 0 48px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; color: var(--faint); }
.foot div { display: flex; gap: 24px; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 44px 0 0; border-top: 1px solid var(--ink); }
.stats div { padding: 18px 20px 0 0; }
.stats div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.stats strong { display: block; font: 600 clamp(26px, 3.4vw, 40px)/1.05 var(--mono); letter-spacing: -.05em; }
.stats span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); max-width: 22ch; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; row-gap: 18px; } .stats div:nth-child(3) { padding-left: 0; border-left: 0; } }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 12px; }
.tabs button { font: 500 14px var(--sans); color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 99px; padding: 7px 14px; }
.tabs button:hover { color: var(--ink); border-color: var(--ink); }
.tabs button[aria-selected=true] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
pre.code { margin: 0; padding: 20px 22px; border: 1px solid var(--rule); border-radius: 12px; background: var(--raise); font: 13.5px/1.7 var(--mono); overflow-x: auto; max-width: 820px; }
pre.code .c { color: var(--faint); }
.js [data-panel][hidden] { display: none; }
html:not(.js) .tabs { display: none; }
html:not(.js) [data-panel] { margin-bottom: 12px; }

.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--ink); }
.groups > div { padding: 22px 28px 0 0; }
.groups > div + div { padding-left: 28px; border-left: 1px solid var(--rule); }
.groups b { font: 600 12.5px var(--mono); color: var(--faint); }
.groups h3 { margin: 6px 0 8px; font: 600 22px var(--sans); letter-spacing: -.02em; }
.groups p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.groups code { display: inline-block; margin: 0 4px 6px 0; padding: 3px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--raise); font-size: 12.5px; }
@media (max-width: 820px) { .groups { grid-template-columns: 1fr; } .groups > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 22px; } }

.eval { margin-top: 36px; max-width: 900px; }
.eval .row { display: grid; grid-template-columns: 250px minmax(0, 1fr) 84px 76px 52px; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.eval .head { border-top: 0; font-size: 12.5px; color: var(--faint); padding-bottom: 6px; }
.eval .n { font: 13px var(--mono); text-align: right; white-space: nowrap; }
.eval .track { height: 12px; border-radius: 3px; background: var(--soft); }
.eval .bar { height: 100%; border-radius: 3px; background: var(--faint); width: calc(100% * var(--v) / var(--max)); }
.eval .us { font-weight: 600; }
.eval .us .bar { background: var(--c-span); }
.eval.lib .row { grid-template-columns: 170px minmax(0, 1fr) 84px 120px 84px; }
.eval.lib small { color: var(--faint); font-size: 12px; margin-left: 4px; }
.eval.lib .bar, .eval.calls .bar { min-width: 3px; }
.eval.calls .row { grid-template-columns: 190px minmax(0, 1fr) 84px 104px 84px; }
.eval.calls small { color: var(--faint); font-size: 12px; margin-left: 4px; font-weight: 400; }
h3.view { margin: 44px 0 0; font: 600 19px var(--sans); letter-spacing: -.01em; }
h3.view span { font-weight: 400; font-size: 14px; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
h3.view + .eval { margin-top: 14px; }
@media (max-width: 760px) { .eval .row, .eval.lib .row, .eval.calls .row { grid-template-columns: minmax(0, 1fr) 76px 64px; } .eval.calls .row > :nth-child(4) { display: none; } h3.view span { display: block; margin: 4px 0 0; } .eval.lib .row > :nth-child(4) { display: none; } .eval .track, .eval .t { display: none; } }

table.num { max-width: 620px; margin-top: 30px; }
table.num th, table.num td { padding: 10px 8px; }
table.num td { width: auto; text-align: right; font: 14px var(--mono); }
table.num thead th { text-align: right; }
table.num thead th:first-child, table.num tbody th { text-align: left; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.facts strong { display: block; font: 600 34px/1 var(--mono); letter-spacing: -.05em; }
.facts span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } }

/* the inner pages */
.page { padding: 56px 0 0; }
.page h1 { max-width: 22ch; font-size: clamp(34px, 5vw, 54px); }
.page h2 { margin-top: 64px; }
.page p, .page li { max-width: 44em; }
.page .body p, .page .body li { color: var(--muted); font-size: 17px; }
.page .body b, .page .body strong { color: var(--ink); font-weight: 600; }
.page .body ul { padding-left: 20px; }
.page .body li { margin: 6px 0; }
.page pre.code { margin: 18px 0; }
.crumbs { font-size: 13.5px; color: var(--faint); margin-bottom: 18px; }
.next { margin-top: 72px; display: flex; flex-wrap: wrap; gap: 10px; }
.next a { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 16px; font-size: 14.5px; background: var(--raise); }
.next a:hover { border-color: var(--ink); }
.more { margin-top: 18px; font-size: 14.5px; }
.more a { text-decoration: underline; text-underline-offset: 3px; }