@font-face {
  font-family: "Barlow Condensed";
  src: url(fonts/barlow-condensed-600.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url(fonts/barlow-condensed-700.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url(fonts/barlow-400.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url(fonts/barlow-600.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url(fonts/fragment-mono-400.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #d42a2a;
  --paper: #f8f8f9;
  --fine: #f0e8e8;
  --major: #e6d6d6;
  --text: #1a1517;
  --muted: #6c6164;
  --rule: 1px solid var(--major);
  --cond: "Barlow Condensed", ui-sans-serif, sans-serif;
  --mono: "Fragment Mono", ui-monospace, Menlo, monospace;
  --twp-background: #fff;
  --twp-keyword: #c8201e;
  --twp-operator: #c8201e;
  --twp-comment: #7c7276;
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  color: var(--text);
  font:
    400 16px/1.6 Barlow,
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--major) 1px, transparent 1px),
    linear-gradient(90deg, var(--major) 1px, transparent 1px),
    linear-gradient(var(--fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--fine) 1px, transparent 1px);
  background-size:
    80px 80px,
    80px 80px,
    16px 16px,
    16px 16px;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cap {
  font: 600 12.5px/1.2 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.m {
  font-family: var(--mono);
}
.ink {
  color: var(--ink);
}
.empty {
  color: var(--muted);
  margin: 0;
}

.frame {
  position: relative;
  margin: 24px;
  min-height: calc(100vh - 48px);
  border: 1.5px solid var(--ink);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
}
.zones {
  position: absolute;
  display: flex;
  justify-content: space-around;
  color: var(--ink);
  opacity: 0.55;
  font: 600 10.5px var(--cond);
  letter-spacing: 0.1em;
  pointer-events: none;
  overflow-anchor: none;
}
.zones.h {
  left: 0;
  right: 0;
  height: 22px;
  align-items: center;
}
.zones.t {
  top: -23px;
}
.zones.b {
  bottom: -23px;
}
.zones.v {
  top: 0;
  bottom: 0;
  width: 22px;
  flex-direction: column;
  align-items: center;
}
.zones.l {
  left: -23px;
}
.zones.r {
  right: -23px;
}

.top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 40px;
  border-bottom: var(--rule);
}
.logo {
  font: 700 21px/1 var(--cond);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo svg {
  width: 20px;
  height: 20px;
  color: var(--ink);
}
.field {
  flex: 1;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  border-bottom: 1.5px solid var(--text);
}
.field:focus-within {
  border-bottom-color: var(--ink);
}
.field {
  position: relative;
}
.suggest {
  position: absolute;
  top: calc(100% + 1.5px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: min(70vh, 480px);
  overflow: auto;
  background: #fff;
  border: 1.5px solid var(--text);
  border-top: 0;
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--text) 35%, transparent);
}
.suggest li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 16px;
  padding: 8px 14px 8px 12px;
  border-left: 2px solid transparent;
  cursor: pointer;
}
.suggest li.on {
  border-left-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.suggest .s-name {
  font: 400 15px var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggest li.on .s-name {
  color: var(--ink);
}
.suggest .s-name small {
  margin-left: 8px;
  font-size: 12px;
  color: var(--muted);
}
.suggest .s-n {
  font: 400 13px var(--mono);
  text-align: right;
}
.suggest .s-n small {
  color: var(--muted);
}
.suggest .s-d {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggest .s-all {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 10px;
  border-top: var(--rule);
  color: var(--ink);
  font: 600 12.5px/1.2 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.suggest .s-all kbd {
  color: inherit;
}
.field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font:
    400 15px Barlow,
    sans-serif;
  color: var(--text);
  outline: none;
}
.field input::placeholder {
  color: var(--muted);
}
.field input::-webkit-search-cancel-button {
  display: none;
}
kbd {
  font: 400 12px var(--mono);
  color: var(--muted);
}

.hero {
  padding: 40px 40px 32px;
}
.hero .eyebrow {
  color: var(--ink);
}
.hero h1 {
  margin: 8px 0 0;
  font: 700 88px/0.88 var(--cond);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}
.hero .sub {
  margin: 14px 0 0;
  font-size: 20px;
  line-height: 1.4;
  max-width: 46ch;
}
.hero code {
  font: 400 0.85em var(--mono);
}
.deprecated {
  margin: 16px 0 0;
  max-width: 760px;
  padding: 10px 14px;
  border-left: 3px solid var(--ink);
  background: #fff;
}
.deprecated .cap {
  color: var(--ink);
  margin-right: 8px;
}
.meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font: 400 14px var(--mono);
  color: var(--muted);
}
.meta b {
  color: var(--text);
  font-weight: 400;
}
.meta .tag {
  color: var(--ink);
}
.meta a {
  text-decoration: none;
}
.meta a:hover b {
  color: var(--ink);
}
.verified {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--ink);
  vertical-align: -3px;
}
.meta .proof {
  display: inline-flex;
}
.listing .proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
  color: var(--ink);
  font: 600 12px/1 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.proof-lead {
  display: flex;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.proof-lead .verified {
  margin-top: 2px;
}
.deprecated.older {
  border-left-color: var(--text);
}
.deprecated.older .cap {
  color: var(--text);
}
.deprecated.older a {
  color: var(--ink);
  font-family: var(--mono);
}

.install {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 760px;
  padding: 10px 0;
  border-top: 1.5px solid var(--text);
  border-bottom: 1.5px solid var(--text);
}
.install code {
  font: 400 18px var(--mono);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.install code i {
  font-style: normal;
  color: var(--ink);
  margin-right: 10px;
}
.install .pm {
  display: flex;
  gap: 16px;
}
.install .pm button {
  color: var(--muted);
  padding: 4px 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.install .pm button.on {
  color: var(--ink);
  text-decoration: underline 2px;
  text-underline-offset: 6px;
}
.install .copy {
  color: var(--ink);
  padding: 4px 0;
}
.install .copy kbd {
  color: inherit;
}
.install .copy[data-done] {
  color: var(--text);
}

.stats {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
}
.stats div {
  display: grid;
}
.stats b {
  font: 700 34px/1 var(--cond);
}
.stats span {
  color: var(--muted);
  margin-top: 4px;
}

.tabs {
  display: flex;
  gap: 28px;
  padding: 0 40px;
  border-bottom: var(--rule);
}
.tabs a {
  padding: 12px 0;
  color: var(--muted);
  text-decoration: none;
}
.tabs a:hover {
  color: var(--text);
}
.tabs a.on {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--ink);
}
.tabs em {
  font-style: normal;
  color: var(--ink);
  margin-left: 6px;
}
.tabs a.end {
  margin-left: auto;
}

.body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  padding: 12px 40px 56px;
}
.body > * {
  min-width: 0;
}

.readme {
  max-width: 740px;
  overflow-wrap: break-word;
}
.readme h1,
.readme h2 {
  font: 700 28px/1.1 var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 36px 0 12px;
}
.readme h1 {
  font-size: 34px;
}
.readme h3,
.readme h4 {
  font: 700 18px var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 24px 0 4px;
  color: var(--ink);
}
.readme p,
.readme li {
  font-size: 16.5px;
}
.readme a {
  color: var(--ink);
  text-underline-offset: 3px;
}
.readme ul,
.readme ol {
  padding-left: 22px;
}
.readme li::marker {
  color: var(--ink);
}
.readme img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.readme blockquote {
  margin: 16px 0;
  padding: 2px 16px;
  border-left: 3px solid var(--major);
  color: var(--muted);
}
.readme hr {
  border: 0;
  border-top: var(--rule);
  margin: 28px 0;
}
.readme table {
  border-collapse: collapse;
  display: block;
  overflow: auto;
  max-width: 100%;
}
.readme th,
.readme td {
  padding: 6px 12px;
  border-bottom: var(--rule);
  text-align: left;
}
.readme code {
  font: 400 13px var(--mono);
}
.readme :not(pre) > code {
  background: #fff;
  padding: 1px 5px;
}
.readme details {
  margin: 12px 0;
}
.readme summary {
  cursor: pointer;
  color: var(--ink);
}

.twinkleplop {
  margin: 16px 0;
  background: #fff;
  padding: 18px 20px;
  overflow: auto;
  box-shadow: inset 3px 0 0 var(--ink);
  font: 400 12.5px/1.65 var(--mono);
  color: var(--twp-identifier);
}
.twinkleplop code {
  font: inherit;
}

.side section {
  padding: 20px 0 4px;
}
.side section + section {
  border-top: var(--rule);
}
.side h2 {
  margin: 0 0 12px;
  display: flex;
  justify-content: space-between;
  color: var(--ink);
}
.side h2 span:last-child {
  color: var(--muted);
}
.big {
  font: 700 44px/1 var(--cond);
}
.big small {
  font: 400 13px var(--mono);
  color: var(--muted);
  margin-left: 10px;
}
.chart {
  display: block;
  width: 100%;
  height: 72px;
  margin-top: 10px;
}
.chart .fill {
  fill: color-mix(in srgb, var(--ink) 8%, transparent);
}
.chart .line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}
.cadence {
  height: 56px;
}
.cadence .stable {
  fill: var(--ink);
}
.cadence .pre {
  fill: var(--major);
}
.axis {
  display: flex;
  justify-content: space-between;
  font: 400 11.5px var(--mono);
  color: var(--muted);
  margin-top: 4px;
}
.rows {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 15px;
  min-width: 0;
}
.rows li > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rows li a {
  text-decoration: none;
}
.rows li a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.rows li span {
  font: 400 13px var(--mono);
  color: var(--muted);
  white-space: nowrap;
}
.rows li b {
  font: 400 14px var(--mono);
}
.rows em {
  font-style: normal;
  font: 400 11.5px var(--mono);
  color: var(--ink);
  margin-left: 8px;
}
.fig {
  display: flex;
  gap: 16px;
  align-items: center;
}
.seal {
  flex: none;
  color: var(--ink);
}
.seal text {
  font: 700 15px var(--cond);
}
.fig p {
  margin: 0;
  font: 400 12.5px/1.5 var(--mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.kw {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font: 400 13px var(--mono);
}
.kw a {
  color: var(--muted);
  text-decoration: none;
}
.kw a::before {
  content: "#";
  color: var(--ink);
}
.kw a:hover {
  color: var(--ink);
}

.listing h2 {
  display: flex;
  gap: 10px;
  margin: 28px 0 8px;
  color: var(--ink);
}
.listing h2 span {
  color: var(--muted);
}
.listing table {
  width: 100%;
  border-collapse: collapse;
}
.listing > :first-child {
  margin-top: 12px;
}
.listing th {
  text-align: left;
  color: var(--ink);
  padding: 8px 12px 8px 0;
  border-bottom: var(--rule);
}
.listing td {
  padding: 7px 12px 7px 0;
  border-bottom: 1px dashed var(--major);
}
.listing td.m {
  font-size: 14px;
}
.listing .tag {
  color: var(--ink);
  font-size: 12px;
}
.listing .warn {
  color: var(--ink);
}
.listing tr.gone td {
  color: var(--muted);
}
.listing td a {
  text-decoration: none;
}
.listing td a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.listing tr.on td:first-child a {
  color: var(--ink);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  min-height: calc(100vh - 160px);
}
.split > * {
  min-width: 0;
}
.list {
  border-right: var(--rule);
  padding: 8px 0 24px;
}
.list .empty {
  padding: 12px 32px;
}
.lhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px;
}
.lhead span:last-child {
  font: 400 13px var(--mono);
  color: var(--muted);
}
.row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 12px 32px 12px 30px;
  border-left: 2px solid transparent;
  text-decoration: none;
}
.row:hover {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.row .i {
  grid-row: span 2;
  font: 400 12px var(--mono);
  color: var(--muted);
  padding-top: 3px;
}
.row h3 {
  margin: 0;
  font: 400 16px var(--mono);
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
}
.row h3 span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row h3 small {
  font-size: 12.5px;
  color: var(--muted);
}
.row .n {
  text-align: right;
  font: 400 14px var(--mono);
  white-space: nowrap;
}
.row .n small {
  color: var(--muted);
  font-size: 12px;
}
.row p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row.on {
  border-left-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.row.on h3 {
  color: var(--ink);
}
.row mark {
  background: none;
  color: inherit;
  text-decoration: underline 1.5px var(--ink);
  text-underline-offset: 3px;
}
.preview {
  padding: 28px 40px 40px;
}
.preview[aria-busy="true"] {
  opacity: 0.55;
  transition: opacity 0.15s;
}
.preview h2.name {
  margin: 6px 0 0;
  font: 700 60px/0.9 var(--cond);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.preview h2.name a {
  text-decoration: none;
}
.preview .sub {
  margin: 10px 0 0;
  font-size: 17px;
}
.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 24px;
  margin: 22px 0 0;
}
.kv dt {
  color: var(--ink);
}
.kv dd {
  margin: 0;
  font: 400 14.5px var(--mono);
}
.preview .readme {
  margin-top: 8px;
}
.preview .open {
  display: inline-block;
  margin-top: 8px;
  color: var(--ink);
  text-decoration: none;
}
.hints {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 12px 32px;
  border-top: var(--rule);
  color: var(--muted);
  font-size: 13px;
}
.hints span {
  display: flex;
  gap: 6px;
  align-items: center;
}
.hints kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--muted);
  color: var(--text);
}

.top nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.menu {
  display: none;
}
a[aria-disabled="true"] {
  color: var(--muted);
  cursor: not-allowed;
  text-decoration: none;
}
.readme a.off {
  color: var(--muted);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.readme[aria-busy="true"] [data-body]::before {
  content: "Loading the readme…";
  display: block;
  padding: 24px 0;
  color: var(--muted);
}
.readme [id^="user-content-"] {
  scroll-margin-top: 24px;
}
.twinkleplop .ln {
  display: inline-block;
  min-width: 2.5em;
  margin-right: 1.25em;
  text-align: right;
  color: var(--muted);
  user-select: none;
}
.body.wide {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 0;
  padding-bottom: 0;
}
.files {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 60vh;
  margin: 0 -40px;
}
.files .note {
  color: var(--muted);
  margin: 0;
  padding: 16px 24px;
}
.tree {
  padding: 16px 0 24px;
  overflow: auto;
  max-height: calc(100vh - 120px);
  position: sticky;
  top: 0;
  font: 400 14px var(--mono);
}
.tree-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0 20px 12px 40px;
  font: 400 12px/1.5 var(--mono);
  color: var(--muted);
}
.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tree ul ul {
  padding-left: 14px;
  margin-left: 46px;
  border-left: 1px dashed var(--major);
}
.tree ul ul ul {
  margin-left: 6px;
}
.tree a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 20px 3px 40px;
  text-decoration: none;
  white-space: nowrap;
}
.tree summary {
  display: flex;
  align-items: baseline;
  padding: 3px 20px 3px calc(40px - 1.25em);
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
  color: var(--text);
}
.tree ul ul a {
  padding-left: 8px;
}
.tree ul ul summary {
  padding-left: calc(8px - 1.25em);
}
.tree summary::-webkit-details-marker {
  display: none;
}
.tree summary::before {
  content: "+";
  color: var(--ink);
  flex: none;
  width: 1.25em;
}
.tree details[open] > summary::before {
  content: "−";
}
.tree a span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree a small {
  color: var(--muted);
  font-size: 12px;
}
.tree a:hover,
.tree summary:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.tree a.on {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow: inset 2px 0 0 var(--ink);
}
.viewer {
  min-width: 0;
  outline: none;
  background: #fff;
  border-left: var(--rule);
}
.file-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: var(--rule);
  background: var(--paper);
  font: 400 14px var(--mono);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.crumbs span:last-child {
  color: var(--ink);
}
.crumbs i {
  font-style: normal;
  color: var(--muted);
}
.file-head .meta {
  display: flex;
  gap: 16px;
  align-items: center;
  color: var(--muted);
  white-space: nowrap;
  margin: 0;
  font-size: 13px;
}
.file-head .meta a {
  color: var(--ink);
  text-decoration: none;
}
.viewer .twinkleplop {
  margin: 0;
  padding: 16px 24px 48px;
  box-shadow: none;
}
.viewer .readme {
  padding: 8px 24px 48px;
}
.viewer .image {
  padding: 24px;
  display: flex;
  justify-content: center;
}
.viewer .image img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 860px) {
  .menu {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 8px 0;
  }
  .menu::after {
    content: "";
    width: 14px;
    height: 9px;
    border-block: 1.5px solid var(--ink);
    background: linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat;
  }
  .top[data-open] .menu::after {
    content: "×";
    width: 14px;
    height: auto;
    border: 0;
    background: none;
    color: var(--ink);
    font: 400 20px/9px var(--mono);
    text-align: center;
  }
  .top nav {
    display: none;
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    gap: 0;
    padding: 4px 16px 8px;
    background: var(--paper);
    border-bottom: 1.5px solid var(--ink);
    box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--text) 40%, transparent);
  }
  .top nav a {
    padding: 12px 0;
  }
  .top nav a + a {
    border-top: 1px dashed var(--major);
  }
  .top[data-open] nav {
    display: flex;
  }
  .files {
    grid-template-columns: 1fr;
    margin: 0 -16px;
  }
  .tree {
    position: static;
    max-height: 40vh;
    border-bottom: var(--rule);
  }
  .viewer {
    border-left: 0;
  }
  .tree-head {
    padding-left: 16px;
    padding-right: 16px;
  }
  .tree a {
    padding-left: 30px;
    padding-right: 16px;
  }
  .tree summary {
    padding-left: calc(30px - 1.25em);
    padding-right: 16px;
  }
  .tree ul ul {
    margin-left: 22px;
  }
  .file-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 16px;
  }
  .viewer .twinkleplop,
  .viewer .readme,
  .files .note {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 860px) {
  .field {
    position: static;
  }
  .suggest {
    top: 100%;
    border-left: 0;
    border-right: 0;
    border-top: 1.5px solid var(--text);
  }
  .frame {
    margin: 10px;
    min-height: calc(100vh - 20px);
  }
  .zones {
    display: none;
  }
  .top {
    padding: 12px 16px;
    gap: 14px;
  }
  .field kbd {
    display: none;
  }
  .hero {
    padding: 24px 16px;
  }
  .hero h1 {
    font-size: 56px;
  }
  .hero .sub {
    font-size: 17px;
  }
  .install {
    flex-wrap: wrap;
    gap: 10px;
  }
  .install code {
    flex-basis: 100%;
    font-size: 16px;
  }
  .stats {
    gap: 14px 28px;
  }
  .stats b {
    font-size: 28px;
  }
  .tabs {
    padding: 0 16px;
    gap: 20px;
    overflow: auto;
  }
  .tabs a {
    white-space: nowrap;
  }
  .body {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 16px 40px;
  }
  .split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .preview,
  .hints {
    display: none;
  }
  .list {
    border: 0;
  }
  .lhead {
    padding: 14px 16px;
  }
  .list .empty {
    padding: 12px 16px;
  }
  .row {
    padding: 12px 16px 12px 14px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .row .i {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .preview[aria-busy="true"] {
    transition: none;
  }
}

.mark {
  flex: none;
  display: block;
  color: var(--ink);
}
.top nav .who {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}
.top nav .who:hover {
  color: var(--ink);
}
.top nav .phone {
  display: none;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font: 600 13px/1 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  background: color-mix(in srgb, var(--ink) 86%, var(--text));
}
.btn.quiet {
  background: none;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn.quiet:hover,
.btn.quiet:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.btn[disabled] {
  background: var(--major);
  color: var(--muted);
  cursor: not-allowed;
}
.link {
  color: var(--ink);
  text-decoration: none;
}
.link:hover {
  text-decoration: underline;
}
.in {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.in > span {
  color: var(--muted);
}
.in input,
.in select {
  width: 100%;
  height: 38px;
  padding: 0;
  border: 0;
  border-bottom: 1.5px solid var(--text);
  border-radius: 0;
  background: none;
  color: var(--text);
  font:
    400 16px Barlow,
    sans-serif;
  outline: none;
}
.in select {
  appearance: none;
  padding-right: 20px;
  background:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%) right 6px center / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--ink) 50%) right 0 center / 6px 6px no-repeat;
}
.in input:focus,
.in select:focus {
  border-bottom-color: var(--ink);
}
.in .m,
.in input.m {
  font: 400 15px var(--mono);
}
.note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.note.gap {
  margin-top: 10px;
}
.notice,
.error {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 3px solid var(--text);
  background: #fff;
  font-size: 15px;
}
.error {
  border-left-color: var(--ink);
  color: var(--ink);
}

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100vh - 140px);
}
.auth > main {
  padding: 56px 48px;
  border-right: var(--rule);
}
.auth > aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 28px;
  padding: 56px 48px;
}
.auth h1 {
  margin: 8px 0 32px;
  font: 700 80px/0.88 var(--cond);
  text-transform: uppercase;
}
.auth .eyebrow,
.auth aside h2 {
  color: var(--ink);
}
.auth aside h2 {
  margin: 0 0 10px;
}
.auth form {
  display: grid;
  gap: 22px;
  max-width: 380px;
}
.auth .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.auth aside ul {
  margin: 0;
  padding-left: 20px;
}
.auth aside li {
  margin: 4px 0;
}
.auth aside li::marker {
  color: var(--ink);
}
.auth aside .install {
  margin-top: 0;
}
.auth .action {
  margin: 0 0 20px;
  padding: 12px 16px;
  list-style: none;
  border-left: 2px solid var(--ink);
  background: #fff;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.auth .origin {
  margin: 0 0 24px;
  border-top: var(--rule);
}
.auth .origin li {
  padding: 7px 0;
  border-bottom: 1px dashed var(--major);
}
.auth .origin li > :first-child {
  flex: none;
}
.auth .origin b {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.sheet {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  min-height: calc(100vh - 120px);
}
.card {
  padding: 32px;
  border-right: var(--rule);
}
.card .ident {
  display: flex;
  align-items: center;
  gap: 18px;
}
.card .eyebrow {
  color: var(--ink);
}
.card h1 {
  margin: 4px 0 0;
  font: 700 46px/0.9 var(--cond);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.card .gh {
  display: inline-block;
  margin-top: 6px;
  color: var(--muted);
  font: 400 13px var(--mono);
  text-decoration: none;
}
.card .gh:hover {
  color: var(--ink);
}
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 24px 0 0;
  border-top: 1.5px solid var(--text);
  border-left: var(--rule);
}
.facts div {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-right: var(--rule);
  border-bottom: var(--rule);
}
.facts dt {
  color: var(--ink);
}
.facts dd {
  margin: 0;
  font: 700 26px/1 var(--cond);
}
.facts .wide {
  grid-column: span 2;
}
.facts .wide dd {
  font: 400 14px var(--mono);
}
.card h2 {
  display: flex;
  justify-content: space-between;
  margin: 28px 0 8px;
  color: var(--ink);
}
.card h2 span:last-child {
  color: var(--muted);
}
.card .rows li {
  align-items: center;
}
.card .rows a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.card .edit {
  display: flex;
  width: 100%;
  margin-top: 16px;
}
.packs {
  padding: 8px 0;
}
.packs .lhead {
  padding: 14px 40px;
}
.packs .empty {
  padding: 12px 40px;
}
.packs article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 24px;
  padding: 18px 40px;
  border-bottom: 1px dashed var(--major);
}
.packs article h3 {
  margin: 0;
  font: 700 26px/1 var(--cond);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.packs article h3 a {
  text-decoration: none;
}
.packs article h3 a:hover {
  color: var(--ink);
}
.packs article p {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
}
.packs article .n {
  grid-row: span 2;
  color: var(--muted);
  font: 400 13px/1.7 var(--mono);
  text-align: right;
  white-space: nowrap;
}
.packs article .n b {
  color: var(--text);
  font-weight: 400;
}

.set {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: calc(100vh - 120px);
}
.set > * {
  min-width: 0;
}
.rail {
  padding: 28px 0;
  border-right: var(--rule);
}
.rail h2 {
  margin: 18px 32px 6px;
  color: var(--muted);
}
.rail h2:first-child {
  margin-top: 0;
}
.rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 32px 7px 30px;
  border-left: 2px solid transparent;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
}
.rail a.sub {
  padding-left: 60px;
  font-size: 14px;
}
.rail a[aria-current="page"] {
  border-left-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
}
.rail a:hover {
  color: var(--ink);
}
.rail a .mark {
  flex: none;
  width: 20px;
  height: 20px;
}
.pane {
  padding: 28px 40px 56px;
}
.pane > .eyebrow {
  color: var(--ink);
}
.pane > h1 {
  margin: 6px 0 4px;
  font: 700 56px/0.9 var(--cond);
  text-transform: uppercase;
}
.pane > .note {
  margin: 6px 0 28px;
}
.pane > h1 + :not(.note) {
  margin-top: 28px;
}
.listing .person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.listing .person .mark {
  margin: 0;
}
.pane section + section {
  margin-top: 32px;
}
.pane h2 {
  display: flex;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--ink);
}
.pane h2 span {
  color: var(--muted);
}
.create {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 20px;
  align-items: end;
  max-width: 980px;
  padding: 4px 0 8px;
}
.create.two {
  grid-template-columns: 1.4fr 1.2fr auto;
  max-width: 820px;
}
.create.one {
  grid-template-columns: minmax(0, 380px) auto;
}
.create .btn {
  justify-self: start;
}
.create {
  align-items: start;
}
.create > .btn {
  margin-top: 19px;
}
.pane .note + form {
  margin-top: 12px;
}
.pane form + form.create {
  margin-top: 24px;
}
.card .full {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 17px;
}
.secret {
  max-width: 760px;
  margin: 0 0 28px;
}
.secret .install {
  margin-top: 10px;
  border-color: var(--ink);
}
.secret .install code {
  font-size: 15px;
}
.listing td {
  vertical-align: middle;
}
.listing td .mark {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}
.listing td form {
  display: inline;
}
.listing .act {
  text-align: right;
  white-space: nowrap;
}
.listing .act button,
.listing .act a {
  margin-left: 16px;
  color: var(--ink);
  font: 600 12px/1 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.listing .role {
  color: var(--muted);
  font: 400 13px var(--mono);
}
.listing .role.owner {
  color: var(--ink);
}
.listing .in select {
  width: 150px;
  height: 30px;
  font-size: 15px;
}
.pane h2 code {
  color: var(--muted);
  font: 400 13px var(--mono);
  letter-spacing: 0;
  text-transform: none;
}
.listing > .note {
  margin-top: 10px;
}
.workflow {
  position: relative;
  max-width: 760px;
  border-top: 1.5px solid var(--text);
  border-bottom: 1.5px solid var(--text);
  background: #fff;
}
.workflow pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font: 400 14px/1.6 var(--mono);
}
.workflow .copy {
  position: absolute;
  top: 10px;
  right: 16px;
  padding: 4px 0;
  color: var(--ink);
}
.workflow .copy[data-done] {
  color: var(--text);
}
.workflow + .note {
  max-width: 760px;
}
.gh-link {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

@media (max-width: 860px) {
  .top nav .phone {
    display: block;
  }
  .top nav .who span {
    display: inline;
  }
  .auth {
    grid-template-columns: 1fr;
  }
  .auth > main {
    padding: 32px 16px;
    border-right: 0;
    border-bottom: var(--rule);
  }
  .auth > aside {
    padding: 28px 16px;
  }
  .auth h1 {
    font-size: 56px;
  }
  .sheet {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 20px 16px;
    border-right: 0;
    border-bottom: var(--rule);
  }
  .packs .lhead,
  .packs .empty,
  .packs article {
    padding-left: 16px;
    padding-right: 16px;
  }
  .set {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .rail {
    display: flex;
    overflow-x: auto;
    padding: 8px 0;
    border-right: 0;
    border-bottom: var(--rule);
  }
  .rail h2 {
    display: none;
  }
  .rail a.wide.open {
    padding-right: 8px;
    color: var(--ink);
  }
  .rail a,
  .rail a.sub {
    flex: none;
    width: auto;
    padding: 10px 16px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    font-size: 15px;
    white-space: nowrap;
  }
  .rail a[aria-current="page"] {
    border-bottom-color: var(--ink);
    background: none;
  }
  .rail a.sub {
    padding: 10px 8px;
    color: var(--muted);
    font-size: 14px;
  }
  .rail a.sub[aria-current="page"] {
    color: var(--ink);
  }
  .pane {
    padding: 20px 16px 40px;
  }
  .pane > h1 {
    font-size: 44px;
  }
  .create,
  .create.two,
  .create.one {
    grid-template-columns: 1fr;
  }
  .create .btn {
    justify-self: start;
  }
  .listing .wide {
    display: none;
  }
  .pane .listing {
    overflow-x: auto;
  }
  .listing .in select {
    width: 118px;
  }
  .listing .act button {
    margin-left: 8px;
  }
}

.account {
  position: relative;
}
.account > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.account > summary::-webkit-details-marker {
  display: none;
}
.account > summary:hover {
  color: var(--ink);
}
.account > summary i {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ink);
}
.account[open] > summary i {
  transform: rotate(180deg);
}
.menu-list {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 220px;
  padding: 6px 0;
  background: #fff;
  border: 1.5px solid var(--text);
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--text) 35%, transparent);
  font:
    400 15px/1.4 Barlow,
    sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.menu-list a,
.menu-list button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  color: var(--text);
  text-align: left;
  text-decoration: none;
}
.menu-list a:hover,
.menu-list button:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
}
.menu-list a.ink {
  color: var(--ink);
}
.menu-head {
  display: grid;
  padding: 8px 16px 10px;
  margin-bottom: 6px;
  border-bottom: var(--rule);
}
.menu-head b {
  font: 700 18px/1.2 var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.menu-head span {
  color: var(--muted);
  font-size: 13px;
}
.menu-list form {
  margin-top: 6px;
  padding-top: 6px;
  border-top: var(--rule);
}
.codes ol {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 4px 48px;
  margin: 12px 0 0;
  padding: 0;
  list-style-position: inside;
  font-size: 15px;
}
.codes ol li::marker {
  color: var(--ink);
}
.codes .btn {
  margin-top: 16px;
}
.danger h2 {
  color: var(--ink);
}
@media (max-width: 860px) {
  .account {
    display: none;
  }
  .top nav span.phone {
    display: contents;
  }
}

.rail a.new {
  justify-content: center;
  width: auto;
  margin: 10px 32px 0 30px;
  padding: 8px 12px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font: 600 12.5px/1.2 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rail a.new::before {
  content: "+";
  margin-right: 2px;
  font-size: 15px;
  line-height: 1;
}
.rail a.new:hover,
.rail a.new[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}
.toasts {
  position: fixed;
  right: 48px;
  bottom: 48px;
  z-index: 50;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border-left: 3px solid var(--text);
  background: #fff;
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--text) 40%, transparent);
  font-size: 15px;
  line-height: 1.45;
  animation: toast 0.18s ease-out;
}
.toast.error {
  border-left-color: var(--ink);
}
.toast span {
  flex: 1;
}
.toast a {
  color: var(--ink);
  font: 600 12.5px/1.6 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.toast .dismiss {
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}
.toast .dismiss:hover {
  color: var(--text);
}
@keyframes toast {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.in input[aria-invalid="true"],
.in select[aria-invalid="true"],
.in input:user-invalid {
  border-bottom: 2px solid var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.in:has([aria-invalid="true"]) > span,
.in:has(input:user-invalid) > span {
  color: var(--ink);
}
@media (max-width: 860px) {
  .toasts {
    right: 16px;
    bottom: 16px;
  }
  .rail a.new,
  .rail a.new:hover,
  .rail a.new[aria-current="page"] {
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text);
    font:
      400 15px/1.6 Barlow,
      sans-serif;
    letter-spacing: 0;
    text-transform: none;
  }
  .rail a.new[aria-current="page"] {
    border-bottom-color: var(--ink);
    color: var(--ink);
  }
}
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

.in .problem {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}
.pane section + section {
  margin-top: 48px;
}
.auth .or {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 380px;
  margin: 28px 0 18px;
  color: var(--muted);
}
.auth .or::before,
.auth .or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--major);
}
.btn.wide {
  width: 100%;
  max-width: 380px;
}
.top nav a[aria-current="page"] {
  color: var(--ink);
}
.btn[aria-disabled="true"] {
  background: var(--major);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}

.hero.pricing h1 {
  font-size: 104px;
}
.hero.pricing .sub {
  max-width: 52ch;
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1.5px solid var(--text);
}
.plan {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  padding: 28px 40px 36px;
}
.plan + .plan {
  border-left: var(--rule);
}
.plan.paid {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.plan h2 {
  margin: 0;
  color: var(--ink);
}
.plan .cost {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.plan .cost b {
  font: 700 64px/0.9 var(--cond);
}
.plan .cost span {
  color: var(--muted);
  font: 400 13px var(--mono);
}
.plan ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: var(--rule);
}
.plan li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--major);
  font-size: 15px;
  line-height: 1.4;
}
.plan li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 6px;
  background: var(--ink);
}
.plan .btn {
  margin-top: 26px;
  justify-self: start;
}
.terms {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  padding: 16px 40px;
  border-top: var(--rule);
  color: var(--muted);
  font-size: 14.5px;
}
.terms b {
  color: var(--text);
  font-weight: 600;
}
.readers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 40px;
  padding: 40px;
  border-top: 1.5px solid var(--text);
}
.readers h2 {
  margin: 8px 0 0;
  font: 700 44px/0.95 var(--cond);
  text-transform: uppercase;
}
.readers p {
  margin: 14px 0 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.readers table {
  width: 100%;
  align-self: start;
  border-collapse: collapse;
  border-top: 1.5px solid var(--text);
}
.readers th,
.readers td {
  padding: 14px 0;
  border-bottom: var(--rule);
  text-align: left;
  vertical-align: baseline;
}
.readers th {
  color: var(--muted);
  font: 400 14px var(--mono);
}
.readers td {
  text-align: right;
  font: 700 34px/1 var(--cond);
}
.readers tr.us td {
  color: var(--ink);
}
.readers td small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font: 400 12.5px var(--mono);
}
.questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--rule);
}
.questions div {
  padding: 24px 40px 28px;
  border-bottom: var(--rule);
}
.questions div:nth-child(odd) {
  border-right: var(--rule);
}
.questions div:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.questions h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.questions p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
@media (max-width: 860px) {
  .hero.pricing h1 {
    font-size: 44px;
  }
  .plans {
    grid-template-columns: 1fr;
  }
  .plan {
    padding: 24px 16px 28px;
  }
  .plan + .plan {
    border-top: var(--rule);
    border-left: 0;
  }
  .terms {
    padding: 16px;
  }
  .readers {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 16px;
  }
  .readers h2 {
    font-size: 36px;
  }
  .questions {
    grid-template-columns: 1fr;
  }
  .questions div {
    padding: 20px 16px;
  }
  .questions div:nth-child(odd) {
    border-right: 0;
  }
  .questions div:nth-last-child(2) {
    border-bottom: var(--rule);
  }
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: 56px 40px 48px;
  text-align: center;
}
.home-hero .eyebrow {
  color: var(--ink);
}
.home-hero h1 {
  margin: 8px 0 0;
  font: 700 132px/0.88 var(--cond);
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.home-hero .sub {
  margin: 14px auto 0;
  max-width: 46ch;
  font-size: 20px;
  line-height: 1.4;
}
.find {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 640px;
  margin-top: 26px;
  border: 1.5px solid var(--text);
  background: var(--paper);
  text-align: left;
}
.find:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 16%, transparent);
}
.find > i {
  display: grid;
  place-items: center;
  width: 48px;
  border-right: var(--rule);
  color: var(--ink);
  font: 400 20px var(--mono);
  font-style: normal;
}
.find input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--text);
  font: 400 18px var(--mono);
  outline: none;
}
.find input::placeholder {
  color: var(--muted);
}
.find input::-webkit-search-cancel-button {
  display: none;
}
.find kbd {
  display: grid;
  place-items: center;
  align-self: center;
  min-width: 22px;
  height: 22px;
  margin-right: 12px;
  border: 1px solid var(--muted);
  color: var(--muted);
  font: 400 13px var(--mono);
}
.find button {
  padding: 0 22px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font: 600 13px/1 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.find button:hover {
  background: color-mix(in srgb, var(--ink) 86%, var(--text));
}
.find .suggest {
  left: -1.5px;
  right: -1.5px;
}
.tries {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin: 12px 0 0;
  color: var(--muted);
  font: 400 13px var(--mono);
}
.tries a {
  border-bottom: 1px solid var(--major);
  color: var(--text);
  text-decoration: none;
}
.tries a:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.activity {
  position: relative;
  padding-top: 26px;
  border-top: var(--rule);
}
.activity [data-w] {
  display: none;
}
.activity:has(#w-30d:checked) [data-w="30d"],
.activity:has(#w-90d:checked) [data-w="90d"],
.activity:has(#w-1y:checked) [data-w="1y"],
.activity:has(#w-all:checked) [data-w="all"] {
  display: block;
}
.activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 0 40px;
}
.activity-head .heads {
  min-width: 0;
}
.total {
  display: flex;
  align-items: flex-end;
  gap: 6px 18px;
}
.total .num {
  font: 700 64px/0.82 var(--cond);
  letter-spacing: -0.005em;
}
.caption {
  display: grid;
  gap: 4px;
  padding-bottom: 1px;
}
.caption h2 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}
.caption h2 span {
  color: var(--ink);
  font-weight: 600;
}
.change {
  margin: 0;
  color: var(--muted);
  font: 400 13px/1.2 var(--mono);
}
.change b {
  font-weight: 400;
}
.change.up b {
  color: var(--text);
  font-weight: 700;
}
.change.down b {
  color: var(--ink);
}
.windows {
  display: flex;
  gap: 16px;
}
.windows input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.windows label {
  padding: 4px 0;
  color: var(--muted);
  font: 600 12.5px/1.2 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.windows label:hover {
  color: var(--text);
}
.windows input:checked + label {
  color: var(--ink);
  text-decoration: underline 2px;
  text-underline-offset: 6px;
}
.windows input:focus-visible + label {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.plot {
  position: relative;
  margin-top: 24px;
  outline: none;
  cursor: crosshair;
}
.plot:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}
.lane {
  position: relative;
  height: 220px;
  border-bottom: 1.5px solid var(--text);
}
.gridline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--major);
}
.gridline.half {
  top: 50%;
}
.gridline span {
  position: absolute;
  right: 40px;
  bottom: 3px;
  padding: 0 3px;
  background: var(--paper);
  color: var(--muted);
  font: 400 11px/1 var(--mono);
}
.lane svg.area {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.area .fill {
  fill: color-mix(in srgb, var(--ink) 7%, transparent);
}
.area .line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.plot .cursor,
.plot .dot,
.plot .tip {
  display: none;
  position: absolute;
  pointer-events: none;
}
.plot .cursor {
  top: 0;
  bottom: 0;
  left: calc(var(--x, 1) * 100%);
  width: 0;
  border-left: 1px solid var(--text);
}
.plot .dot {
  left: calc(var(--x, 1) * 100%);
  width: 9px;
  height: 9px;
  margin: 0 0 -4.5px -4.5px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.plot .tip {
  top: 0;
  z-index: 3;
  padding: 6px 10px;
  border: 1px solid var(--text);
  background: var(--paper);
  font: 400 12px/1.35 var(--mono);
  white-space: nowrap;
}
.plot .tip span {
  color: var(--muted);
}
.plot .tip b {
  font: 700 20px/1.1 var(--cond);
}
.plot[data-on] .cursor,
.plot[data-on] .dot {
  display: block;
}
.plot[data-on] .tip {
  display: grid;
}
.ticks {
  position: relative;
  height: 24px;
  margin-top: 8px;
  color: var(--muted);
  font: 400 11.5px var(--mono);
}
.ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.ticks span::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  height: 4px;
  border-left: 1px solid var(--muted);
}
.ticks span.l {
  transform: none;
}
.ticks span.l::before {
  left: 0;
}
.ticks span.r {
  transform: translateX(-100%);
}
.ticks span.r::before {
  left: 100%;
}

.totals {
  display: flex;
  border-top: 1.5px solid var(--text);
}
.cells {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.cell {
  display: grid;
  flex: 1 1 auto;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 18px 16px;
  border-right: var(--rule);
}
.cell:first-of-type {
  padding-left: 40px;
}
.cell b {
  font: 700 30px/1 var(--cond);
  white-space: nowrap;
}
.cell span {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.3;
  white-space: nowrap;
}
.cell em {
  color: var(--ink);
  font-style: normal;
}
.cell.private,
.publish {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.group {
  display: none;
}
.publish {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
}
.publish .btn {
  white-space: nowrap;
}

.releases {
  border-top: var(--rule);
}
.releases h2 {
  margin: 0;
  padding: 14px 40px 0;
}
.strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.strip article {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 18px 8px;
  border-right: var(--rule);
  text-align: center;
}
.strip article:last-child {
  border-right: 0;
}
.strip .seal {
  width: 88px;
  height: 88px;
}
.strip .seal text {
  font-size: 12px;
}
.strip a {
  font: 400 14px var(--mono);
  text-decoration: none;
}
.strip a:hover {
  color: var(--ink);
}
.strip small {
  color: var(--muted);
  font: 400 12px var(--mono);
}
.proof[data-tip] {
  position: relative;
  display: inline-flex;
  margin-left: 6px;
  vertical-align: -2px;
  color: var(--ink);
  cursor: help;
  outline: none;
}
.proof[data-tip] .verified {
  width: 14px;
  height: 14px;
  margin: 0;
  pointer-events: none;
}
.proof[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: 240px;
  padding: 7px 10px;
  background: var(--text);
  color: var(--paper);
  font:
    400 12.5px/1.4 Barlow,
    sans-serif;
  text-align: left;
  white-space: normal;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.proof[data-tip]:hover::after,
.proof[data-tip]:focus-visible::after {
  opacity: 1;
}

.ledgers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--rule);
}
.ledgers > section {
  min-width: 0;
  padding: 24px 40px 40px;
}
.ledgers > section + section {
  border-left: var(--rule);
}
.ledgers h2 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 6px;
  color: var(--ink);
}
.ledgers h2 span:last-child {
  color: var(--muted);
}
.ledgers ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ledgers li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 76px;
  gap: 0 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--major);
}
.ledgers li.plain {
  grid-template-columns: minmax(0, 1fr) auto;
}
.ledgers .who {
  min-width: 0;
}
.ledgers li a {
  font: 400 16px var(--mono);
  text-decoration: none;
}
.ledgers li a:hover {
  color: var(--ink);
}
.ledgers .who small {
  margin-left: 8px;
  color: var(--muted);
  font: 400 12.5px var(--mono);
}
.ledgers li p {
  grid-column: 1/-1;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 14.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ledgers .n {
  text-align: right;
  font: 400 14px/22px var(--mono);
}
.ledgers .n small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.3;
}
.rank {
  color: var(--muted);
  font: 400 12px/22px var(--mono);
}
.meter {
  display: block;
  height: 3px;
  margin-top: 6px;
  background: var(--fine);
}
.meter i {
  display: block;
  height: 3px;
  background: var(--ink);
}

.pro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding: 40px;
  border-top: 1.5px solid var(--text);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.pro h2 {
  margin: 8px 0 0;
  font: 700 44px/0.95 var(--cond);
  text-transform: uppercase;
}
.pro p {
  max-width: 44ch;
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.5;
}
.pro .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.pro dl {
  display: grid;
  align-content: start;
  margin: 0;
  border-top: 1.5px solid var(--text);
}
.pro dl > div {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: var(--rule);
}
.pro dt {
  font: 700 34px/1 var(--cond);
}
.pro dt small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font: 400 12.5px var(--mono);
}
.pro dd {
  margin: 0;
}
.pro dd b {
  display: block;
  color: var(--ink);
  font: 600 13px/1.2 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pro dd span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.45;
}

@media (max-width: 1240px) {
  .cell {
    padding-left: 12px;
    padding-right: 12px;
  }
  .cell b {
    font-size: 26px;
  }
  .cell span {
    white-space: normal;
  }
}
@media (max-width: 860px) {
  .home-hero {
    padding: 36px 16px 32px;
  }
  .home-hero h1 {
    font-size: 72px;
  }
  .find {
    margin-top: 22px;
  }
  .find > i {
    width: 34px;
    font-size: 17px;
  }
  .find input {
    height: 48px;
    padding: 0 8px;
    font-size: 16px;
  }
  .find kbd {
    display: none;
  }
  .find button {
    padding: 0 12px;
  }
  .tries {
    gap: 6px 14px;
    font-size: 12.5px;
  }
  .activity {
    padding-top: 22px;
  }
  .activity-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "num win" "cap cap";
    align-items: center;
    gap: 10px 12px;
    padding: 0 16px;
  }
  .activity-head .heads,
  .activity-head .total {
    display: contents;
  }
  .activity:has(#w-30d:checked) .heads [data-w="30d"],
  .activity:has(#w-90d:checked) .heads [data-w="90d"],
  .activity:has(#w-1y:checked) .heads [data-w="1y"],
  .activity:has(#w-all:checked) .heads [data-w="all"] {
    display: contents;
  }
  .total .num {
    grid-area: num;
    font-size: 48px;
  }
  .caption {
    grid-area: cap;
  }
  .windows {
    grid-area: win;
  }
  .caption h2 {
    font-size: 15px;
  }
  .change {
    font-size: 12px;
  }
  .lane {
    height: 160px;
  }
  .gridline span {
    right: 16px;
  }
  .totals {
    flex-direction: column;
  }
  .cells {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .group {
    display: block;
    grid-column: 1/-1;
    padding: 12px 16px 0;
    color: var(--muted);
    font: 600 12px/1.2 var(--cond);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .group.private {
    border-top: var(--rule);
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    color: var(--ink);
  }
  .cell {
    align-content: start;
    padding: 8px 10px 14px;
    border-right: 0;
  }
  .cell:first-of-type,
  .group.private + .cell {
    padding-left: 16px;
  }
  .cell b {
    font-size: 24px;
  }
  .cell span {
    display: block;
    font-size: 13px;
  }
  .cell em {
    display: none;
  }
  .publish {
    padding: 16px;
    border-top: var(--rule);
  }
  .releases h2 {
    padding: 14px 16px 0;
  }
  .strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .strip article {
    flex: 0 0 150px;
    scroll-snap-align: start;
  }
  .strip a {
    white-space: nowrap;
  }
  .ledgers {
    grid-template-columns: 1fr;
  }
  .ledgers > section {
    padding: 20px 16px 28px;
  }
  .ledgers > section + section {
    border-top: var(--rule);
    border-left: 0;
  }
  .pro {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 16px;
  }
  .pro h2 {
    font-size: 36px;
  }
  .pro dl > div {
    grid-template-columns: 110px minmax(0, 1fr);
  }
  .pro dt {
    font-size: 28px;
  }
  .ticks span.minor {
    display: none;
  }
}

.side h2 .info {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  font: 700 12px/1 var(--mono);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.side h2 .info:hover,
.side h2 .info:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.prose {
  overflow-wrap: break-word;
  font-size: 16.5px;
  line-height: 1.65;
}
.prose > :first-child {
  margin-top: 0;
}
.prose p {
  margin: 14px 0 0;
}
.prose a {
  color: var(--ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover {
  text-decoration-thickness: 2px;
}
.prose strong {
  font-weight: 600;
}
.prose code {
  font: 400 0.84em/1 var(--mono);
}
.prose pre code {
  font: inherit;
}
.prose .nowrap {
  white-space: nowrap;
}
.prose .fence {
  --twp-attribute: var(--text);
  --twp-autolink: var(--text);
  --twp-bit: var(--text);
  --twp-bold: var(--text);
  --twp-boolean: var(--text);
  --twp-builtin: var(--text);
  --twp-changed: var(--text);
  --twp-code: var(--text);
  --twp-constant: var(--text);
  --twp-datetime: var(--text);
  --twp-decorator: var(--text);
  --twp-deleted: var(--text);
  --twp-directive: var(--text);
  --twp-doctype: var(--text);
  --twp-entity: var(--text);
  --twp-escape: var(--text);
  --twp-expression: var(--text);
  --twp-format: var(--text);
  --twp-function: var(--text);
  --twp-hash: var(--text);
  --twp-heading: var(--text);
  --twp-hr: var(--text);
  --twp-identifier: var(--text);
  --twp-inserted: var(--text);
  --twp-italic: var(--text);
  --twp-label: var(--text);
  --twp-lifetime: var(--text);
  --twp-namespace: var(--text);
  --twp-null: var(--text);
  --twp-number: var(--text);
  --twp-operator: var(--text);
  --twp-output: var(--text);
  --twp-parameter: var(--text);
  --twp-prompt: var(--text);
  --twp-punctuation: var(--text);
  --twp-regex: var(--text);
  --twp-selector: var(--text);
  --twp-space: var(--text);
  --twp-strike: var(--text);
  --twp-string: var(--text);
  --twp-tab: var(--text);
  --twp-tag: var(--text);
  --twp-template: var(--text);
  --twp-type: var(--text);
  --twp-unit: var(--text);
  --twp-url: var(--text);
  --twp-variable: var(--text);
  --twp-variant: var(--text);
  --twp-keyword: var(--ink);
  --twp-property: var(--ink);
  --twp-comment: var(--muted);
}
.prose .fence .twinkleplop {
  font: 400 13px/1.7 var(--mono);
  color: var(--text);
}

.prose ul,
.prose ol {
  margin: 14px 0 0;
  padding-left: 22px;
}
.prose li {
  margin-top: 6px;
}
.prose li > p {
  margin-top: 0;
}
.prose li > p + * {
  margin-top: 12px;
}
.prose li::marker {
  color: var(--ink);
}
.prose img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.prose .anchor {
  margin-left: 0.35em;
  color: var(--major);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
}
.prose :is(h2, h3, h4):hover .anchor,
.prose .anchor:focus-visible {
  opacity: 1;
}
.prose .anchor:hover {
  color: var(--ink);
}
.prose h2,
.prose h3,
.prose h4 {
  scroll-margin-top: 24px;
}
.prose .table {
  margin: 18px 0 0;
  overflow-x: auto;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.prose th {
  text-align: left;
  vertical-align: bottom;
}
.prose td {
  vertical-align: top;
}
.prose td code,
.prose th code {
  font-size: 13px;
}
.prose .fence {
  margin: 18px 0 0;
  background: #fff;
}
.prose .fence-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prose .fence-copy {
  color: var(--ink);
  font: 600 12px/1 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 0;
}
.prose .fence-lang,
.prose .fence-name {
  font: 600 12px/1 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.prose .fence-name {
  font: 400 12.5px/1 var(--mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.prose .fence pre {
  margin: 0;
  box-shadow: none;
  background: none;
}
.prose blockquote {
  margin: 18px 0 0;
  padding: 0;
}
.prose .markdown-alert-title {
  margin: 0;
}

.docs-head .stamp span + span::before {
  content: " · ";
}
@media (max-width: 860px) {
  .docs-head .stamp span {
    display: block;
  }
  .docs-head .stamp span + span::before {
    content: none;
  }
}
@media (max-width: 860px) {
  .prose {
    font-size: 16px;
  }
}
@media (max-width: 860px) {
  .prose .table:has(> table[data-kind="routes"]) {
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .prose table[data-kind="routes"] {
    display: block;
    min-width: 0;
    border: 0;
    background: none;
  }
  .prose table[data-kind="routes"] thead {
    display: none;
  }
  .prose table[data-kind="routes"] tbody {
    display: block;
    border-top: 1px solid var(--text);
  }
  .prose table[data-kind="routes"] tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    padding: 10px 0;
    border-bottom: var(--rule);
  }
  .prose table[data-kind="routes"] td {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    font-weight: 400;
  }
  .prose table[data-kind="routes"] td::before {
    content: none;
  }
  .prose table[data-kind="routes"] td:not(:last-child) {
    font: 400 13px/1.5 var(--mono);
  }
  .prose table[data-kind="routes"] td:first-child {
    color: var(--ink);
  }
  .prose table[data-kind="routes"] td:not(:last-child) code {
    white-space: nowrap;
  }
  .prose table[data-kind="routes"] td:last-child {
    flex-basis: 100%;
    margin-top: 4px;
  }
  .prose table[data-kind="routes"] td:last-child code {
    white-space: normal;
  }
}

.docs-tree .docs-find {
  position: relative;
  margin: 0 0 14px;
}
.docs-tree .docs-find input {
  width: 100%;
  height: 34px;
  border: 0;
  border-bottom: 1.5px solid var(--text);
  background: none;
  font:
    400 15px Barlow,
    sans-serif;
  color: var(--text);
  outline: none;
  padding: 0;
}
.docs-tree .docs-find input:focus {
  border-bottom-color: var(--ink);
}
.docs-tree .docs-find input::placeholder {
  color: var(--muted);
}
.docs-tree .docs-find input::-webkit-search-cancel-button {
  display: none;
}
.docs-tree .docs-hits {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.docs-tree .docs-hits a {
  display: grid;
  padding: 6px 0;
  text-decoration: none;
}
.docs-tree .docs-hits b {
  font-weight: 400;
  font-size: 15px;
}
.docs-tree .docs-hits span {
  color: var(--muted);
  font-size: 13px;
}
.docs-tree .docs-hits .none {
  color: var(--muted);
  font-size: 14px;
  padding: 6px 0;
}
body[data-searching] .docs-tree .docs-nav {
  display: none;
}
.docs-tree h2 {
  margin: 20px 0 4px;
  color: var(--muted);
}
.docs-tree h2:first-child {
  margin-top: 4px;
}
.docs-tree a.docs-link {
  display: block;
  padding: 5px 0;
  font-size: 15px;
  text-decoration: none;
}
.docs-tree a.docs-link:hover {
  color: var(--ink);
}
.docs-tree a.docs-link[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}
.docs-tree .docs-toc {
  margin: 2px 0 8px;
  padding: 0;
  border-left: 1px solid var(--major);
}
.docs-tree .docs-toc a {
  display: block;
  margin-left: -1px;
  padding: 4px 0 4px 12px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}
.docs-tree .docs-toc a:hover {
  color: var(--ink);
}
.docs-tree .docs-toc a[data-on] {
  color: var(--ink);
  border-left-color: var(--ink);
}

.docs {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: calc(100vh - 120px);
}
.docs > * {
  min-width: 0;
}
.docs > aside {
  border-right: var(--rule);
}
.docs > aside > .docs-tree {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow: auto;
  padding: 24px 24px 40px 32px;
  scrollbar-width: thin;
}
.docs-bar {
  display: none;
}
.docs-content {
  padding: 32px 48px 64px;
  max-width: 808px;
}
.docs-head .cap {
  color: var(--ink);
}
.docs-head h1 {
  margin: 6px 0 0;
  font: 700 52px/0.9 var(--cond);
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.docs-head .lede {
  margin: 14px 0 0;
  font-size: 19px;
  line-height: 1.45;
  max-width: 48ch;
}
.docs-head .stamp {
  margin: 10px 0 0;
  color: var(--muted);
  font: 400 12.5px var(--mono);
}
.docs-body {
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-top: 36px;
}
.docs-body > * {
  grid-column: 1;
}
.docs-body > .fence {
  grid-column: 2;
}
.docs-body > :is(h2, .table) {
  grid-column: 1 / -1;
}
.docs-body > :is(ol, ul) {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: start;
}
.docs-body > :is(ol, ul) > li {
  grid-column: 1;
  position: relative;
}
.docs-body > :is(ol, ul) > li:has(> .fence) {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: start;
}
.docs-body > :is(ol, ul) > li > * {
  grid-column: 1;
}
.docs-body > :is(ol, ul) > li > .fence {
  grid-column: 2;
  margin-top: 0;
}
.docs-body > :is(ol, ul) > li > p + .fence {
  margin-top: 0;
}
.docs-body > ul {
  padding-left: 0;
  list-style: none;
}
.docs-body > ul > li {
  padding-left: 20px;
}
.docs-body > ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 6px;
  height: 6px;
  background: var(--ink);
}
.docs-body > ol {
  padding-left: 0;
  list-style: none;
  counter-reset: step;
}
.docs-body > ol > li {
  counter-increment: step;
}
.docs-body > ol > li {
  padding-left: 34px;
}
.docs-body > ol > li:has(> .fence) {
  padding-left: 0;
}
.docs-body > ol > li:has(> .fence) > :not(.fence) {
  padding-left: 34px;
}
.docs-body > ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--text);
  font: 400 12px/1 var(--mono);
}
.docs-body > ol > li > .fence {
  margin-top: 2px;
}
.prose h2 {
  margin: 52px 0 0;
  padding-top: 16px;
  border-top: var(--rule);
  font: 700 28px/1.05 var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.prose h3 {
  margin: 30px 0 0;
  font: 700 17px/1.2 var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.prose h2 + *,
.prose h3 + * {
  margin-top: 10px;
}
.docs-body > h2 + .fence {
  grid-column: 1 / -1;
  margin-top: 16px;
}
.prose :not(pre) > code {
  background: #fff;
  padding: 2px 5px;
}
.prose td code {
  background: none;
  padding: 0;
}
.prose .fence {
  box-shadow:
    inset 0 1.5px 0 var(--ink),
    inset 0 0 0 1px var(--major);
}
.prose .fence-bar {
  padding: 10px 16px 0;
}
.prose .fence-lang,
.prose .fence-name {
  color: var(--ink);
}
.prose .fence .twinkleplop {
  padding: 8px 16px 14px;
  overflow: auto;
  font-size: 12.5px;
}
.prose th {
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid var(--text);
  color: var(--muted);
  font: 600 12px/1.2 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.prose td {
  padding: 9px 16px 9px 0;
  border-bottom: var(--rule);
}
.prose td:first-child code,
.prose td:nth-child(2) code {
  white-space: nowrap;
}
.prose blockquote:not(.markdown-alert) {
  padding-left: 16px;
  border-left: 2px solid var(--major);
  color: var(--muted);
}
.prose .markdown-alert {
  padding: 12px 16px 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--major);
}
.prose .markdown-alert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 12.5px/1.2 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.prose .markdown-alert-title::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--text);
}
.prose .markdown-alert-title + p {
  margin-top: 6px;
}
.prose .markdown-alert-note .markdown-alert-title::before {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--muted);
}
.prose .markdown-alert-note .markdown-alert-title {
  color: var(--muted);
}
.prose :is(.markdown-alert-important, .markdown-alert-warning, .markdown-alert-caution) {
  background: color-mix(in srgb, var(--ink) 5%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent);
}
.prose
  :is(.markdown-alert-important, .markdown-alert-warning, .markdown-alert-caution)
  .markdown-alert-title {
  color: var(--ink);
}
.prose
  :is(.markdown-alert-important, .markdown-alert-warning, .markdown-alert-caution)
  .markdown-alert-title::before {
  background: var(--ink);
}
.prose .markdown-alert-caution {
  background: color-mix(in srgb, var(--ink) 9%, #fff);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 56px;
  border-top: 1px solid var(--text);
  border-bottom: var(--rule);
}
.docs-pager a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0;
  text-decoration: none;
}
.docs-pager a .cap {
  color: var(--muted);
}
.docs-pager a b {
  font: 700 20px/1.1 var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.docs-pager a:hover b {
  color: var(--ink);
}
.docs-pager .next {
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
}
.docs-home {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.docs-home section {
  padding: 14px 16px 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--major);
}
.docs-home h2 {
  margin: 0 0 4px;
  color: var(--ink);
}
.docs-home a {
  display: block;
  margin-top: 10px;
  text-decoration: none;
}
.docs-home a b {
  display: block;
  font: 700 19px/1.1 var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.docs-home a span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.docs-home a:hover b {
  color: var(--ink);
}
.docs-body > *,
.docs-body > .fence,
.docs-body > :is(ol, ul) > li > .fence {
  grid-column: 1;
}
.docs-body > :is(ol, ul) > li > .fence {
  margin-top: 12px;
}
.docs-body > ol > li > .fence {
  margin-left: 34px;
}
@media (max-width: 860px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs > aside {
    display: none;
  }
  .docs-bar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--paper);
    border-bottom: var(--rule);
  }
  .docs-bar summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    cursor: pointer;
    list-style: none;
  }
  .docs-bar summary::-webkit-details-marker {
    display: none;
  }
  .docs-bar summary .cap {
    color: var(--ink);
    flex: none;
  }
  .docs-bar summary span:not(.cap) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
  }
  .docs-bar summary::after {
    content: "";
    flex: none;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    transform: translateY(-2px) rotate(45deg);
  }
  .docs-bar[open] summary::after {
    transform: translateY(2px) rotate(-135deg);
  }
  .docs-bar .docs-tree {
    max-height: 70vh;
    overflow: auto;
    padding: 4px 16px 16px;
    border-top: 1px dashed var(--major);
  }
  .docs-bar .docs-tree .docs-find {
    margin-top: 8px;
  }
  .docs-content {
    padding: 22px 16px 40px;
  }
  .prose :is(h2, h3) {
    scroll-margin-top: 60px;
  }
  .docs-head h1 {
    font-size: 42px;
  }
  .docs-head .lede {
    font-size: 17px;
  }
  .docs-body {
    margin-top: 24px;
  }
  .docs-body > ol > li > .fence {
    margin-left: 0;
  }
  .prose h2 {
    font-size: 25px;
    margin-top: 44px;
  }
  .prose .fence {
    margin-inline: -16px;
  }
  .prose li .fence,
  .docs-body > :is(ol, ul) > li > .fence {
    margin-inline: 0;
    margin-top: 10px;
  }
  .prose .table {
    overflow: visible;
  }
  .prose table,
  .prose tbody,
  .prose tr,
  .prose td {
    display: block;
  }
  .prose thead {
    display: none;
  }
  .prose tr {
    padding: 10px 0;
    border-bottom: var(--rule);
  }
  .prose td {
    padding: 0;
    border: 0;
  }
  .prose td:first-child {
    font-weight: 600;
  }
  .prose td:not(:first-child) {
    margin-top: 6px;
  }
  .prose td:not(:first-child)::before {
    content: attr(data-th);
    display: block;
    color: var(--muted);
    font: 600 11.5px/1.4 var(--cond);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .prose td:first-child code,
  .prose td:nth-child(2) code {
    white-space: normal;
  }
  .docs-pager {
    grid-template-columns: 1fr;
  }
  .docs-pager .next {
    grid-column: 1;
    justify-content: flex-start;
    text-align: left;
    border-top: var(--rule);
  }
  .docs-home {
    grid-template-columns: 1fr;
  }
}
.top > .field {
  margin: -1rem 0;
}
.top nav a:not([aria-disabled="true"]) {
  text-underline-offset: 3px;
  transition: color 0.12s;
}
.top nav a:not([aria-disabled="true"]):hover,
.top nav a:not([aria-disabled="true"]):focus-visible {
  color: var(--ink);
  text-decoration-thickness: 2px;
}
.meta .others {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 10px;
}
.meta .others a:hover .tag,
.meta .others a:hover {
  color: var(--text);
}