@font-face {
  font-family: Archivo;
  src: url("/archivo.8f704806.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: IBM Plex Mono;
  src: url("/ibm-plex-mono-400.08949f72.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: IBM Plex Mono;
  src: url("/ibm-plex-mono-600.0d1f0b8d.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --bg: #0a0b0c;
  --panel: #101213;
  --sunk: #0d0f10;
  --rule: #1c1f21;
  --hair: #15181a;
  --ink: #edeeea;
  --text: #b3b7b4;
  --muted: #70767a;
  --accent: #c7f24a;
  --accent-ink: #0a0b0c;
  --accent-dim: #26300f;
  --warn: #ff7a45;
  --t-key: #e58cd8;
  --t-str: #7fd6a6;
  --t-num: #e8b35c;
  --t-com: #7a7d85;
  --t-fn: #86aaff;
  --t-type: #5ecfd6;
  --t-prop: #edeeea;
  --t-pun: #787e82;
  --t-id: #edeeea;
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --rail: 152px;
  --top: 58px;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f6f7f3;
  --panel: #fff;
  --sunk: #eef0ea;
  --rule: #dcdfd6;
  --hair: #e6e8e1;
  --ink: #0a0b0c;
  --text: #3c4142;
  --muted: #6e7475;
  --accent: #3e7a00;
  --accent-ink: #fff;
  --accent-dim: #e6f0d2;
  --warn: #c44400;
  --t-key: #9a2d8e;
  --t-str: #1f7a52;
  --t-num: #8a5a00;
  --t-com: #8c8e95;
  --t-fn: #2c4fd6;
  --t-type: #0b6e75;
  --t-prop: #15161a;
  --t-pun: #85898a;
  --t-id: #15161a;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

*, :before, :after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--top) + 28px);
}

body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4, p, figure, pre, ol, ul, dl, dd, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}

img, svg {
  max-width: 100%;
  display: block;
}

code, kbd, pre, samp {
  font-family: var(--mono);
  font-feature-settings: "liga" 0,
    "calt" 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}

.vh {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.skip {
  z-index: 20;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .12s;
  position: absolute;
  top: -60px;
  left: 12px;
}

.skip:focus {
  top: 12px;
}

.top {
  z-index: 9;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
}

.top .wrap {
  height: var(--top);
  align-items: center;
  gap: 14px;
  display: flex;
}

.brand {
  color: var(--ink);
  --mk: var(--accent);
  align-items: center;
  gap: 10px;
  text-decoration: none;
  display: flex;
}

.brand b {
  font: 600 19px/1 var(--sans);
  letter-spacing: -.035em;
}

.ver {
  font: 400 12px/1 var(--mono);
  color: var(--muted);
  border-left: 1px solid var(--rule);
  padding-left: 14px;
}

.top nav {
  font: 400 13.5px/1 var(--mono);
  align-items: center;
  gap: 4px;
  margin-left: auto;
  display: flex;
}

.top nav a {
  color: var(--muted);
  border-radius: 6px;
  padding: 8px 11px;
  text-decoration: none;
}

.top nav a:hover {
  color: var(--ink);
  background: var(--sunk);
}

.top nav a[aria-current] {
  color: var(--ink);
}

.icon {
  width: 32px;
  height: 32px;
  color: var(--muted);
  border-radius: 6px;
  place-items: center;
  display: grid;
}

.icon svg {
  width: 17px;
  height: 17px;
}

.icon:hover {
  color: var(--ink);
  background: var(--sunk);
}

[data-theme="light"] .moon, [data-theme="dark"] .sun {
  display: none;
}

@media (width <= 760px) {
  .ver, .top nav a[data-wide] {
    display: none;
  }
}

figure.code {
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 9px;
  margin: 22px 0;
  overflow: hidden;
}

figure.code .bar {
  border-bottom: 1px solid var(--hair);
  background: var(--sunk);
  font: 400 11.5px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  display: flex;
}

figure.code .bar .lang {
  opacity: .62;
  margin-left: 0;
}

figure.code .bar .copy {
  font: inherit;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 5px;
  margin-left: auto;
  padding: 5px 8px;
}

figure.code .bar .copy:hover {
  color: var(--accent);
  border-color: var(--accent);
}

pre.twinkleplop {
  color: var(--ink);
  tab-size: 2;
  margin: 0;
  padding: 15px 16px;
  font-size: 12.9px;
  line-height: 1.62;
  overflow-x: auto;
}

pre.twinkleplop code {
  width: max-content;
  min-width: 100%;
  font: inherit;
  display: block;
}

.tok.keyword {
  color: var(--t-key);
}

.tok.string {
  color: var(--t-str);
}

.tok.number, .tok.unit, .tok.boolean, .tok.constant {
  color: var(--t-num);
}

.tok.comment {
  color: var(--t-com);
  font-style: italic;
}

.tok.function, .tok.builtin {
  color: var(--t-fn);
}

.tok.type, .tok.class {
  color: var(--t-type);
}

.tok.property, .tok.attr {
  color: var(--t-prop);
}

.tok.operator, .tok.punctuation {
  color: var(--t-pun);
}

.tok.tag {
  color: var(--t-key);
}

.tok.selector, .tok.css {
  color: var(--t-fn);
}

.tok.identifier, .tok.parameter {
  color: var(--t-id);
}

:not(pre) > code {
  color: var(--ink);
  background: var(--sunk);
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: .1em .34em;
  font-size: .88em;
}

code.short {
  white-space: nowrap;
}

a > code {
  color: inherit;
  border-color: currentColor;
}

figure.code .bar .file {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

.prose {
  font-size: 16.5px;
  line-height: 1.72;
}

.prose > p, .prose > ul, .prose > ol, .prose > dl, .prose > blockquote, .prose > h2, .prose > h3, .prose > h4 {
  max-width: 76ch;
}

.prose > * + * {
  margin-top: 20px;
}

.prose h2, .prose h3, .prose h4 {
  color: var(--ink);
  letter-spacing: -.024em;
  scroll-margin-top: calc(var(--top) + 24px);
}

.prose h2 {
  font: 600 25px/1.2 var(--sans);
  border-top: 1px solid var(--hair);
  margin-top: 54px;
  padding-top: 22px;
}

.prose h3 {
  font: 600 19px/1.3 var(--sans);
  margin-top: 36px;
}

.prose h4 {
  font: 600 16.5px/1.4 var(--sans);
  margin-top: 28px;
}

.prose h2 > a, .prose h3 > a, .prose h4 > a {
  text-decoration: none;
}

.prose h2 > a:after, .prose h3 > a:after, .prose h4 > a:after {
  content: "#";
  color: var(--accent);
  opacity: 0;
  margin-left: .4em;
  font-weight: 400;
}

.prose h2:hover > a:after, .prose h3:hover > a:after, .prose h4:hover > a:after {
  opacity: .7;
}

.prose a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  -webkit-text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.prose a:hover {
  -webkit-text-decoration-color: var(--accent);
  text-decoration-color: var(--accent);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose ul, .prose ol {
  gap: 9px;
  padding-left: 4px;
  display: grid;
}

.prose li {
  padding-left: 24px;
  position: relative;
}

.prose ul > li:before {
  content: "";
  background: var(--accent);
  border-radius: 1px;
  width: 6px;
  height: 2px;
  position: absolute;
  top: .72em;
  left: 4px;
}

.prose ol {
  counter-reset: item;
}

.prose ol > li {
  counter-increment: item;
}

.prose ol > li:before {
  content: counter(item) ".";
  font: 400 13px/1.72 var(--mono);
  color: var(--accent);
  position: absolute;
  top: 0;
  left: 0;
}

.prose li > ul, .prose li > ol {
  margin-top: 9px;
}

.prose blockquote {
  border-left: 2px solid var(--accent);
  color: var(--muted);
  padding: 2px 0 2px 18px;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 38px 0;
}

.tbl {
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 9px;
  overflow-x: auto;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
  line-height: 1.55;
}

.prose th {
  text-align: left;
  font: 400 11.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  background: var(--sunk);
  white-space: nowrap;
  padding: 13px 16px;
}

.prose td {
  border-bottom: 1px solid var(--hair);
  vertical-align: baseline;
  padding: 12px 16px;
}

.prose [align="right"] {
  text-align: right;
}

.prose [align="center"] {
  text-align: center;
}

.prose tr:last-child td {
  border-bottom: 0;
}

.prose td.codes {
  white-space: nowrap;
}

.prose td:first-child {
  color: var(--ink);
}

.note-box {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  background: var(--panel);
  border-radius: 0 9px 9px 0;
  padding: 16px 18px;
  font-size: 15.5px;
}

.note-box b {
  color: var(--ink);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.note-box.warn {
  border-left-color: var(--warn);
}

.prose figure.code + p, .prose .tbl + p {
  margin-top: 20px;
}

.rail {
  position: relative;
}

.rail:before {
  content: "";
  left: calc(var(--rail) - 1px);
  background: var(--rule);
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.row {
  grid-template-columns: var(--rail) minmax(0, 1fr);
  display: grid;
}

.num {
  font: 400 11.5px/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  padding: 40px 28px 0 0;
}

.body {
  min-width: 0;
  padding: 36px 0 58px 36px;
}

.sec {
  border-top: 1px solid var(--rule);
}

.home h1 {
  font: 600 clamp(40px, 7vw, 76px)/.98 var(--sans);
  letter-spacing: -.046em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 14ch;
}

.home h1 mark {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 3px;
  padding: 0 .1em;
}

.hero .body {
  padding-top: 68px;
  padding-bottom: 60px;
}

.lede {
  max-width: 56ch;
  color: var(--text);
  margin-top: 24px;
  font-size: 17.5px;
}

.term {
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 8px;
  max-width: 620px;
  margin-top: 32px;
}

.term .tbar {
  border-bottom: 1px solid var(--hair);
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  display: flex;
}

.term .tbar i {
  background: var(--rule);
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.term .tbar span {
  font: 400 11.5px/1 var(--mono);
  color: var(--muted);
  margin-left: 6px;
}

.term .tin {
  font-family: var(--mono);
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  font-size: 13.5px;
  display: flex;
}

.term .tin em {
  color: var(--accent);
  -webkit-user-select: none;
  user-select: none;
  font-style: normal;
}

.term .tin code {
  min-width: 0;
  color: var(--ink);
  white-space: nowrap;
  scrollbar-width: none;
  flex: 1;
  overflow-x: auto;
}

.term .tin button {
  font: 400 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 5px;
  flex: none;
  padding: 6px 8px;
}

.term .tin button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.alt {
  font: 400 13px/1.55 var(--mono);
  color: var(--muted);
  margin-top: 15px;
}

.alt a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.stat {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin-bottom: 12px;
  display: flex;
}

.stat b {
  font: 600 clamp(40px, 6vw, 66px)/1 var(--sans);
  letter-spacing: -.042em;
  color: var(--accent);
}

.stat span {
  color: var(--text);
  max-width: 34ch;
  font-size: 16.5px;
}

.home h2 {
  font: 600 26px/1.15 var(--sans);
  letter-spacing: -.03em;
  color: var(--ink);
}

.home .sub {
  color: var(--muted);
  max-width: 64ch;
  margin-top: 10px;
  font-size: 15.5px;
}

.ba {
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 8px;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 28px;
  display: grid;
  overflow: hidden;
}

.pane {
  background: var(--panel);
  min-width: 0;
}

.pane h3 {
  font: 400 11.5px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  background: var(--sunk);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  display: flex;
}

.pane h3 em {
  color: var(--accent);
  font-style: normal;
}

.pane pre.twinkleplop {
  padding: 16px;
  font-size: 12.4px;
}

.claims {
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 8px;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.claims div {
  background: var(--panel);
  padding: 24px 22px;
}

.claims b {
  color: var(--ink);
  letter-spacing: -.018em;
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: 600;
  display: block;
}

.claims p {
  color: var(--muted);
  font-size: 14.5px;
}

.claims code {
  font-size: .9em;
}

.bars {
  gap: 22px;
  margin-top: 26px;
  display: grid;
}

.grp .gl {
  font: 400 12px/1 var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  display: flex;
}

.grp .gl b {
  color: var(--ink);
  font-weight: 400;
}

.b {
  font: 400 12.5px/1 var(--mono);
  grid-template-columns: 78px minmax(0, 1fr) 82px;
  align-items: center;
  gap: 12px;
  padding: 3px 0;
  display: grid;
}

.b .who {
  color: var(--muted);
}

.b .track {
  background: var(--sunk);
  border-radius: 2px;
  height: 9px;
}

.b .track i {
  background: var(--rule);
  border-radius: 2px;
  height: 100%;
  display: block;
}

.b .ms {
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.b.me .who, .b.me .ms {
  color: var(--accent);
}

.b.me .track i {
  background: var(--accent);
}

.b.off .track {
  background: repeating-linear-gradient(135deg,
    var(--rule) 0 4px,
    transparent 4px 8px);
  position: relative;
}

.b.off .track i {
  display: none;
}

.b.off .track em {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  padding: 0 6px;
  font-size: 10.5px;
  font-style: normal;
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}

.note {
  font: 400 12.5px/1.6 var(--mono);
  color: var(--muted);
  margin-top: 18px;
}

.note a {
  color: var(--ink);
}

.langs {
  border-top: 1px solid var(--hair);
  margin-top: 24px;
}

.langs li {
  border-bottom: 1px solid var(--hair);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 20px;
  padding: 11px 2px;
  font-size: 15px;
  display: grid;
}

.langs b {
  color: var(--ink);
  font-weight: 500;
}

.langs span {
  font: 400 12px/1.4 var(--mono);
  color: var(--muted);
  text-align: right;
}

.cfg {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 18px;
  margin-top: 26px;
  display: grid;
}

.cfg figure.code {
  margin: 0;
}

.foot {
  border-top: 1px solid var(--rule);
}

.foot .wrap {
  font: 400 12.5px/1 var(--mono);
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding-top: 30px;
  padding-bottom: 56px;
  display: flex;
}

.foot a {
  text-decoration: none;
}

.foot a:hover {
  color: var(--accent);
}

.foot .sp {
  margin-left: auto;
}

@media (width <= 880px) {
  .rail:before {
    display: none;
  }

  .row {
    grid-template-columns: 1fr;
  }

  .num {
    text-align: left;
    padding: 30px 0 0;
  }

  .body {
    padding: 12px 0 44px;
  }

  .hero .body {
    padding-top: 10px;
    padding-bottom: 44px;
  }

  .ba, .claims, .cfg {
    grid-template-columns: 1fr;
  }

  .b {
    grid-template-columns: 64px minmax(0, 1fr) 70px;
    font-size: 11.5px;
  }

  .foot .sp {
    margin-left: 0;
  }
}

@media (width <= 480px) {
  .term .tin {
    gap: 8px;
    padding: 12px;
    font-size: 12px;
  }

  .term .tin button {
    padding: 5px 7px;
    font-size: 10px;
  }
}

.shell {
  grid-template-columns: 232px minmax(0, 1fr) 182px;
  align-items: start;
  gap: 0 34px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
  display: grid;
}

.side {
  top: var(--top);
  max-height: calc(100vh - var(--top));
  border-right: 1px solid var(--rule);
  scrollbar-width: thin;
  margin-right: -20px;
  padding: 34px 20px 60px 0;
  position: sticky;
  overflow-y: auto;
}

.grp {
  margin-bottom: 26px;
}

.grp-label {
  font: 400 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 10px 10px;
}

.side a {
  color: var(--text);
  border-left: 1px solid var(--hair);
  margin-left: 10px;
  padding: 6px 0 6px 14px;
  font-size: 14.5px;
  text-decoration: none;
  display: block;
}

.side a:hover {
  color: var(--ink);
  border-left-color: var(--rule);
}

.side a[aria-current="page"] {
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 13px;
  font-weight: 500;
}

.side-llms {
  border-top: 1px solid var(--hair);
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 0;
  color: var(--muted) !important;
  border-left: 0 !important;
  padding: 16px 0 0 10px !important;
  display: flex !important;
}

.side-llms code {
  font-size: 11.5px;
}

.subbar {
  border-bottom: 1px solid var(--rule);
  top: var(--top);
  z-index: 8;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  gap: 10px;
  padding: 14px 0;
  display: none;
  position: sticky;
}

.pill {
  border: 1px solid var(--rule);
  font: 400 13px/1 var(--mono);
  color: var(--text);
  border-radius: 7px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  display: inline-flex;
}

.pill svg {
  width: 15px;
  height: 15px;
}

.pill[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

.menu-close, .pill[aria-expanded="true"] .menu-open {
  display: none;
}

.pill[aria-expanded="true"] .menu-close {
  display: block;
}

.doc {
  min-width: 0;
  padding: 34px 0 72px;
}

.doc-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.crumbs {
  font: 400 12px/1 var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  align-items: center;
  gap: 8px;
  display: flex;
}

.crumbs a {
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--ink);
}

.crumbs b {
  color: var(--ink);
  font-weight: 400;
}

.copy-page {
  border: 1px solid var(--rule);
  font: 400 12px/1 var(--mono);
  color: var(--muted);
  border-radius: 7px;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 6px 10px;
  text-decoration: none;
  display: inline-flex;
}

.copy-page:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.copy-page svg {
  width: 14px;
  height: 14px;
}

.doc > h1 {
  font: 600 clamp(32px, 4.4vw, 42px)/1.08 var(--sans);
  letter-spacing: -.038em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 10px;
}

.doc > .summary {
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  max-width: 68ch;
  margin-bottom: 34px;
  padding-bottom: 26px;
  font-size: 17.5px;
}

.pager {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 56px;
  display: grid;
}

.pager .card {
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 9px;
  gap: 5px;
  padding: 14px 16px;
  text-decoration: none;
  display: grid;
}

.pager .card:hover {
  border-color: var(--accent);
}

.pager .card.next {
  text-align: right;
  grid-column: 2;
}

.pager small {
  font: 400 11.5px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.pager b {
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 500;
}

.edit {
  border-top: 1px solid var(--hair);
  font: 400 12.5px/1.5 var(--mono);
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding-top: 20px;
  display: flex;
}

.edit a {
  align-items: center;
  gap: 7px;
  text-decoration: none;
  display: inline-flex;
}

.edit a:hover {
  color: var(--accent);
}

.edit svg {
  width: 14px;
  height: 14px;
}

.edit span {
  margin-left: auto;
}

.toc {
  top: var(--top);
  max-height: calc(100vh - var(--top));
  scrollbar-width: thin;
  padding: 34px 0 60px;
  position: sticky;
  overflow-y: auto;
}

.toc-label {
  font: 400 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.toc a {
  border-left: 2px solid var(--hair);
  color: var(--muted);
  padding: 5px 0 5px 12px;
  font-size: 13.5px;
  text-decoration: none;
  display: block;
}

.toc a:hover {
  color: var(--ink);
  border-left-color: var(--rule);
}

.toc a[aria-current] {
  color: var(--accent);
  border-left-color: var(--accent);
}

@media (width <= 1220px) {
  .shell {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  .toc {
    display: none;
  }
}

@media (width <= 900px) {
  .shell {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .subbar {
    display: flex;
  }

  .side {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    max-height: none;
    margin-right: 0;
    padding: 20px 0 10px;
    display: none;
    position: static;
  }

  .side.open {
    display: block;
  }

  .doc {
    padding-top: 26px;
  }

  .pager {
    grid-template-columns: 1fr;
  }

  .pager .card.next {
    grid-column: 1;
  }
}

.play {
  max-width: 1480px;
  margin: 0 auto;
  padding: 20px clamp(16px, 3vw, 28px) 32px;
  display: block;
}

.play-bar {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  display: flex;
}

.pick {
  font: 400 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.pick select {
  font: 400 13.5px/1 var(--mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 8px 10px;
}

.pick select:hover {
  border-color: var(--muted);
}

.play-state {
  font: 400 12px/1 var(--mono);
  color: var(--muted);
  margin-left: auto;
}

.play-state.ok {
  color: var(--accent);
}

.play-state.failed {
  color: var(--warn);
}

.play [data-share] {
  flex: none;
}

.play-grid {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 16px;
  display: grid;
}

.pane-box.left {
  grid-area: 1 / 1;
}

.pane-box.out {
  grid-area: 1 / 2;
}

.pane-box[hidden] {
  display: none;
}

.pane-box {
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 9px;
  flex-direction: column;
  min-width: 0;
  height: clamp(420px, 100vh - 208px, 1040px);
  display: flex;
  overflow: hidden;
}

.pane-box h2 {
  font: 400 11.5px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  background: var(--sunk);
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  display: flex;
}

.pane-box .hint {
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
  opacity: .8;
}

.pane-box.out .hint {
  color: var(--accent);
}

.pane-box textarea, .pane-box pre {
  resize: none;
  min-height: 0;
  color: var(--ink);
  font: 400 13px/1.62 var(--mono);
  tab-size: 2;
  white-space: pre;
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
}

.pane-box textarea::placeholder {
  color: var(--muted);
}

.pane-box textarea:focus-visible {
  outline: 0;
}

.pane-box:focus-within {
  border-color: var(--accent);
}

.pane-box pre.failed {
  color: var(--warn);
  white-space: pre-wrap;
}

.seg {
  border: 1px solid var(--rule);
  border-radius: 8px;
  display: inline-flex;
  overflow: hidden;
}

.seg button {
  font: 400 13px/1 var(--mono);
  color: var(--muted);
  padding: 8px 14px;
}

.seg button + button {
  border-left: 1px solid var(--rule);
}

.seg button:hover {
  color: var(--ink);
  background: var(--sunk);
}

.seg button[aria-selected="true"] {
  color: var(--accent-ink);
  background: var(--accent);
}

.play-note {
  font: 400 12.5px/1.6 var(--mono);
  color: var(--muted);
  margin-top: 16px;
}

.play-note a {
  color: var(--ink);
}

@media (width <= 900px) {
  .play-grid {
    grid-template-columns: 1fr;
  }

  .pane-box {
    height: clamp(300px, 50vh - 90px, 520px);
  }

  .pane-box.left, .pane-box.out {
    grid-area: auto;
  }
}

@media (width <= 560px) {
  .play-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    display: grid;
  }

  .pick {
    min-width: 0;
  }

  .pick > span {
    display: none;
  }

  .pick select {
    width: 100%;
  }

  .play-state {
    margin-left: 0;
  }

  .play [data-share] {
    justify-self: end;
  }
}

.editor {
  flex: 1;
  min-height: 0;
  position: relative;
}

.editor > pre, .editor > textarea {
  font: 400 13px/1.62 var(--mono);
  font-feature-settings: "liga" 0,
    "calt" 0;
  tab-size: 2;
  white-space: pre;
  border: 0;
  margin: 0;
  padding: 14px 16px;
  position: absolute;
  inset: 0;
  overflow: auto;
}

.editor > pre {
  pointer-events: none;
  color: var(--ink);
}

.editor > textarea {
  color: #0000;
  caret-color: var(--accent);
  resize: none;
  background: none;
  outline: 0;
}

.editor > textarea::selection {
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  color: #0000;
}

.editor > textarea::placeholder {
  color: var(--muted);
  font-family: var(--sans);
  opacity: .75;
  font-style: italic;
}

.complete {
  z-index: 3;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  min-width: 260px;
  max-width: 420px;
  max-height: 300px;
  margin: 0;
  padding: 4px;
  list-style: none;
  position: absolute;
  overflow-y: auto;
  box-shadow: 0 12px 28px -12px #0000008c;
}

.complete[hidden] {
  display: none;
}

.complete li {
  cursor: pointer;
  border-radius: 5px;
  padding: 7px 9px;
}

.complete li[aria-selected="true"] {
  background: var(--sunk);
}

.complete b {
  font: 500 12.5px/1.3 var(--mono);
  color: var(--ink);
}

.complete .def {
  float: right;
  font: 400 11.5px/1.3 var(--mono);
  color: var(--accent);
}

.complete small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.45;
  display: block;
}

dialog.search {
  border: 1px solid var(--rule);
  background: var(--panel);
  width: min(640px, 100vw - 32px);
  max-height: min(520px, 100vh - 96px);
  color: var(--text);
  border-radius: 12px;
  margin: 84px auto auto;
  padding: 0;
  overflow: hidden;
}

dialog.search::backdrop {
  backdrop-filter: blur(2px);
  background: #0000009e;
}

dialog.search form {
  border-bottom: 1px solid var(--hair);
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  display: flex;
}

dialog.search svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
  flex: none;
}

dialog.search input {
  min-width: 0;
  font: 400 15.5px/1 var(--sans);
  color: var(--ink);
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
}

dialog.search kbd {
  font: 400 11px/1 var(--mono);
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 5px 7px;
}

dialog.search .results {
  max-height: 420px;
  padding: 8px;
  overflow-y: auto;
}

dialog.search .results a {
  border-radius: 8px;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
}

dialog.search .results a:hover, dialog.search .results a[aria-selected="true"] {
  background: var(--sunk);
}

dialog.search .results b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  display: block;
}

dialog.search .results span {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  font-size: 13.5px;
  display: block;
  overflow: hidden;
}

dialog.search .results em {
  font: 400 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  font-style: normal;
}

dialog.search .empty {
  text-align: center;
  color: var(--muted);
  padding: 28px 16px;
  font-size: 14.5px;
}