@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url("/asset/font/MonaSans-VariableFont_wdth,wght.ttf") format("truetype");
}
@font-face {
  font-family: "Mona Sans";
  font-style: italic;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url("/asset/font/MonaSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
}
@font-face {
  font-family: "Monaspace Neon";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  src: url("/asset/font/Monaspace Neon Var.ttf") format("truetype");
}
:root {
  --pal-1: #1f2328;
  --pal-2: white;
  --pal-3: #f6f8fa;
  --pal-4: #d8dee4;
  --pal-5: #ddf4ff;
  --pal-6: #a6d9ff;
  --pal-7: #0969da;
  --pal-8: #1f883d;
  --pal-9: #1e793a;
  --pal-10: #a40e26;
  --pal-11: #901126;
  --pal-12: #fd8c73;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --pal-1: #e6edf3;
    --pal-2: #0d1117;
    --pal-3: #161b22;
    --pal-4: #30363d;
    --pal-5: #051d4d;
    --pal-6: #58a6ff;
    --pal-7: #4493f8;
    --pal-8: #3fb950;
    --pal-9: #238636;
    --pal-10: #f85149;
    --pal-11: #da3633;
    --pal-12: #db6d28;
    color-scheme: dark;
  }
}
:root[data-theme=light] {
  --pal-1: #1f2328;
  --pal-2: white;
  --pal-3: #f6f8fa;
  --pal-4: #d8dee4;
  --pal-5: #ddf4ff;
  --pal-6: #a6d9ff;
  --pal-7: #0969da;
  --pal-8: #1f883d;
  --pal-9: #1e793a;
  --pal-10: #a40e26;
  --pal-11: #901126;
  --pal-12: #fd8c73;
  color-scheme: light;
}

:root[data-theme=dark] {
  --pal-1: #e6edf3;
  --pal-2: #0d1117;
  --pal-3: #161b22;
  --pal-4: #30363d;
  --pal-5: #051d4d;
  --pal-6: #58a6ff;
  --pal-7: #4493f8;
  --pal-8: #3fb950;
  --pal-9: #238636;
  --pal-10: #f85149;
  --pal-11: #da3633;
  --pal-12: #db6d28;
  color-scheme: dark;
}

response-viewer > ul:empty::before, .panel .fields ul.multiple:empty::before, webhook-viewer .fields ul.multiple:empty::before, webhook-editor .fields ul.multiple:empty::before, webhook-create .fields ul.multiple:empty::before, secrets-editor .fields ul.multiple:empty::before, response-viewer .fields ul.multiple:empty::before, request-editor .fields ul.multiple:empty::before {
  display: block;
  font-style: italic;
  text-align: center;
  opacity: 0.5;
  margin: 2rem;
}

.panel, webhook-viewer, webhook-editor, webhook-create, secrets-editor, response-viewer, request-editor {
  --theme-border: var(--pal-4);
  --theme-bg: var(--pal-3);
  --theme-fg: var(--pal-1);
  position: relative;
  display: block;
  margin: 0 1rem;
  width: calc(100% - 2rem);
  max-width: 46rem;
}
@media (min-width: 76rem) {
  .panel, webhook-viewer, webhook-editor, webhook-create, secrets-editor, response-viewer, request-editor {
    width: calc(50% - 2rem);
  }
}
.panel h1, webhook-viewer h1, webhook-editor h1, webhook-create h1, secrets-editor h1, response-viewer h1, request-editor h1, .panel h2, webhook-viewer h2, webhook-editor h2, webhook-create h2, secrets-editor h2, response-viewer h2, request-editor h2, .panel h3, webhook-viewer h3, webhook-editor h3, webhook-create h3, secrets-editor h3, response-viewer h3, request-editor h3, .panel h4, webhook-viewer h4, webhook-editor h4, webhook-create h4, secrets-editor h4, response-viewer h4, request-editor h4, .panel h5, webhook-viewer h5, webhook-editor h5, webhook-create h5, secrets-editor h5, response-viewer h5, request-editor h5, .panel h6, webhook-viewer h6, webhook-editor h6, webhook-create h6, secrets-editor h6, response-viewer h6, request-editor h6 {
  display: block;
  margin: 1rem 0;
  padding: 1rem 0;
  font-weight: normal;
  border-bottom: 1px solid var(--theme-border);
}
.panel h1:first-child, webhook-viewer h1:first-child, webhook-editor h1:first-child, webhook-create h1:first-child, secrets-editor h1:first-child, response-viewer h1:first-child, request-editor h1:first-child, .panel h2:first-child, webhook-viewer h2:first-child, webhook-editor h2:first-child, webhook-create h2:first-child, secrets-editor h2:first-child, response-viewer h2:first-child, request-editor h2:first-child, .panel h3:first-child, webhook-viewer h3:first-child, webhook-editor h3:first-child, webhook-create h3:first-child, secrets-editor h3:first-child, response-viewer h3:first-child, request-editor h3:first-child, .panel h4:first-child, webhook-viewer h4:first-child, webhook-editor h4:first-child, webhook-create h4:first-child, secrets-editor h4:first-child, response-viewer h4:first-child, request-editor h4:first-child, .panel h5:first-child, webhook-viewer h5:first-child, webhook-editor h5:first-child, webhook-create h5:first-child, secrets-editor h5:first-child, response-viewer h5:first-child, request-editor h5:first-child, .panel h6:first-child, webhook-viewer h6:first-child, webhook-editor h6:first-child, webhook-create h6:first-child, secrets-editor h6:first-child, response-viewer h6:first-child, request-editor h6:first-child {
  margin-top: 0;
}
.panel h2, webhook-viewer h2, webhook-editor h2, webhook-create h2, secrets-editor h2, response-viewer h2, request-editor h2 {
  font-size: 1.25rem;
  margin: 1rem 0;
}
.panel article, webhook-viewer article, webhook-editor article, webhook-create article, secrets-editor article, response-viewer article, request-editor article {
  margin: 2rem 0;
}
.panel .hidden-area, webhook-viewer .hidden-area, webhook-editor .hidden-area, webhook-create .hidden-area, secrets-editor .hidden-area, response-viewer .hidden-area, request-editor .hidden-area {
  display: none;
}
.panel .hidden-area.show, webhook-viewer .hidden-area.show, webhook-editor .hidden-area.show, webhook-create .hidden-area.show, secrets-editor .hidden-area.show, response-viewer .hidden-area.show, request-editor .hidden-area.show {
  display: block;
}
.panel .kvp, webhook-viewer .kvp, webhook-editor .kvp, webhook-create .kvp, secrets-editor .kvp, response-viewer .kvp, request-editor .kvp {
  list-style-type: none;
  margin: 2rem 0;
  padding: 0;
  max-width: 46rem;
  border: 1px solid var(--theme-border);
  border-radius: 0.25rem;
}
.panel .kvp > li, webhook-viewer .kvp > li, webhook-editor .kvp > li, webhook-create .kvp > li, secrets-editor .kvp > li, response-viewer .kvp > li, request-editor .kvp > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
.panel .kvp > li:nth-child(even), webhook-viewer .kvp > li:nth-child(even), webhook-editor .kvp > li:nth-child(even), webhook-create .kvp > li:nth-child(even), secrets-editor .kvp > li:nth-child(even), response-viewer .kvp > li:nth-child(even), request-editor .kvp > li:nth-child(even) {
  background-color: var(--pal-3);
}
.panel .kvp > li > span, webhook-viewer .kvp > li > span, webhook-editor .kvp > li > span, webhook-create .kvp > li > span, secrets-editor .kvp > li > span, response-viewer .kvp > li > span, request-editor .kvp > li > span {
  font-family: monospace;
}
.panel .kvp button[name=do][value=delete], webhook-viewer .kvp button[name=do][value=delete], webhook-editor .kvp button[name=do][value=delete], webhook-create .kvp button[name=do][value=delete], secrets-editor .kvp button[name=do][value=delete], response-viewer .kvp button[name=do][value=delete], request-editor .kvp button[name=do][value=delete] {
  padding: 0.5rem;
}
.panel .kvp button[name=do][value=delete]::before, webhook-viewer .kvp button[name=do][value=delete]::before, webhook-editor .kvp button[name=do][value=delete]::before, webhook-create .kvp button[name=do][value=delete]::before, secrets-editor .kvp button[name=do][value=delete]::before, response-viewer .kvp button[name=do][value=delete]::before, request-editor .kvp button[name=do][value=delete]::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  aspect-ratio: 1;
  background-color: black;
  mask-image: url("/asset/icon/trash.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}
.panel .kvp button[name=do][value=delete] span, webhook-viewer .kvp button[name=do][value=delete] span, webhook-editor .kvp button[name=do][value=delete] span, webhook-create .kvp button[name=do][value=delete] span, secrets-editor .kvp button[name=do][value=delete] span, response-viewer .kvp button[name=do][value=delete] span, request-editor .kvp button[name=do][value=delete] span {
  display: none;
}
.panel .fields, webhook-viewer .fields, webhook-editor .fields, webhook-create .fields, secrets-editor .fields, response-viewer .fields, request-editor .fields {
  display: flex;
  flex-direction: column;
}
.panel .fields input, webhook-viewer .fields input, webhook-editor .fields input, webhook-create .fields input, secrets-editor .fields input, response-viewer .fields input, request-editor .fields input, .panel .fields textarea, webhook-viewer .fields textarea, webhook-editor .fields textarea, webhook-create .fields textarea, secrets-editor .fields textarea, response-viewer .fields textarea, request-editor .fields textarea, .panel .fields select, webhook-viewer .fields select, webhook-editor .fields select, webhook-create .fields select, secrets-editor .fields select, response-viewer .fields select, request-editor .fields select {
  font-family: "Courier New", "Liberation Mono", "DejaVu Sans Mono", "Source Code Pro", "Ubuntu Mono", "Droid Sans Mono", "Monaco", Consolas, "Lucida Console", monospace;
}
.panel .fields label, webhook-viewer .fields label, webhook-editor .fields label, webhook-create .fields label, secrets-editor .fields label, response-viewer .fields label, request-editor .fields label {
  display: block;
  flex-grow: 1;
  margin-bottom: 1rem;
}
.panel .fields label:last-of-type, webhook-viewer .fields label:last-of-type, webhook-editor .fields label:last-of-type, webhook-create .fields label:last-of-type, secrets-editor .fields label:last-of-type, response-viewer .fields label:last-of-type, request-editor .fields label:last-of-type {
  margin-bottom: 0;
}
.panel .fields label span, webhook-viewer .fields label span, webhook-editor .fields label span, webhook-create .fields label span, secrets-editor .fields label span, response-viewer .fields label span, request-editor .fields label span {
  display: block;
  padding: 0.5rem;
  font-weight: bold;
}
.panel .fields .add, webhook-viewer .fields .add, webhook-editor .fields .add, webhook-create .fields .add, secrets-editor .fields .add, response-viewer .fields .add, request-editor .fields .add, .panel .fields .type, webhook-viewer .fields .type, webhook-editor .fields .type, webhook-create .fields .type, secrets-editor .fields .type, response-viewer .fields .type, request-editor .fields .type, .panel .fields .text, webhook-viewer .fields .text, webhook-editor .fields .text, webhook-create .fields .text, secrets-editor .fields .text, response-viewer .fields .text, request-editor .fields .text {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0 1rem;
}
.panel .fields .add button, webhook-viewer .fields .add button, webhook-editor .fields .add button, webhook-create .fields .add button, secrets-editor .fields .add button, response-viewer .fields .add button, request-editor .fields .add button, .panel .fields .type button, webhook-viewer .fields .type button, webhook-editor .fields .type button, webhook-create .fields .type button, secrets-editor .fields .type button, response-viewer .fields .type button, request-editor .fields .type button, .panel .fields .text button, webhook-viewer .fields .text button, webhook-editor .fields .text button, webhook-create .fields .text button, secrets-editor .fields .text button, response-viewer .fields .text button, request-editor .fields .text button {
  flex-grow: 1;
}
.panel .fields .add, webhook-viewer .fields .add, webhook-editor .fields .add, webhook-create .fields .add, secrets-editor .fields .add, response-viewer .fields .add, request-editor .fields .add {
  justify-content: stretch;
}
.panel .fields .type, webhook-viewer .fields .type, webhook-editor .fields .type, webhook-create .fields .type, secrets-editor .fields .type, response-viewer .fields .type, request-editor .fields .type {
  align-items: last baseline;
}
.panel .fields .type label, webhook-viewer .fields .type label, webhook-editor .fields .type label, webhook-create .fields .type label, secrets-editor .fields .type label, response-viewer .fields .type label, request-editor .fields .type label {
  flex-grow: 0;
}
.panel .fields .text, webhook-viewer .fields .text, webhook-editor .fields .text, webhook-create .fields .text, secrets-editor .fields .text, response-viewer .fields .text, request-editor .fields .text {
  flex-direction: column;
  align-items: stretch;
}
.panel .fields .text .actions, webhook-viewer .fields .text .actions, webhook-editor .fields .text .actions, webhook-create .fields .text .actions, secrets-editor .fields .text .actions, response-viewer .fields .text .actions, request-editor .fields .text .actions {
  display: flex;
}
.panel .fields .actions.primary, webhook-viewer .fields .actions.primary, webhook-editor .fields .actions.primary, webhook-create .fields .actions.primary, secrets-editor .fields .actions.primary, response-viewer .fields .actions.primary, request-editor .fields .actions.primary {
  margin-top: 1rem;
}
.panel .fields .actions.primary button, webhook-viewer .fields .actions.primary button, webhook-editor .fields .actions.primary button, webhook-create .fields .actions.primary button, secrets-editor .fields .actions.primary button, response-viewer .fields .actions.primary button, request-editor .fields .actions.primary button {
  --theme-bg: var(--pal-8);
  --theme-fg: white;
  --theme-border: var(--pal-9);
  width: 100%;
}
.panel .fields .actions:not(.primary) button, webhook-viewer .fields .actions:not(.primary) button, webhook-editor .fields .actions:not(.primary) button, webhook-create .fields .actions:not(.primary) button, secrets-editor .fields .actions:not(.primary) button, response-viewer .fields .actions:not(.primary) button, request-editor .fields .actions:not(.primary) button {
  margin: 1rem 0;
}
.panel .fields .endpoint, webhook-viewer .fields .endpoint, webhook-editor .fields .endpoint, webhook-create .fields .endpoint, secrets-editor .fields .endpoint, response-viewer .fields .endpoint, request-editor .fields .endpoint {
  position: relative;
}
.panel .fields .endpoint label.combo-method, webhook-viewer .fields .endpoint label.combo-method, webhook-editor .fields .endpoint label.combo-method, webhook-create .fields .endpoint label.combo-method, secrets-editor .fields .endpoint label.combo-method, response-viewer .fields .endpoint label.combo-method, request-editor .fields .endpoint label.combo-method {
  position: absolute;
  top: 0;
}
.panel .fields .endpoint label.combo-endpoint, webhook-viewer .fields .endpoint label.combo-endpoint, webhook-editor .fields .endpoint label.combo-endpoint, webhook-create .fields .endpoint label.combo-endpoint, secrets-editor .fields .endpoint label.combo-endpoint, response-viewer .fields .endpoint label.combo-endpoint, request-editor .fields .endpoint label.combo-endpoint {
  margin-left: 8rem;
  width: calc(100% - 8rem);
}
.panel .fields details, webhook-viewer .fields details, webhook-editor .fields details, webhook-create .fields details, secrets-editor .fields details, response-viewer .fields details, request-editor .fields details {
  margin-top: 1rem;
  padding: 0;
  border: 1px solid var(--theme-border);
  border-radius: 0.25rem;
}
.panel .fields details summary, webhook-viewer .fields details summary, webhook-editor .fields details summary, webhook-create .fields details summary, secrets-editor .fields details summary, response-viewer .fields details summary, request-editor .fields details summary {
  padding: 0.5rem 1rem;
  list-style: none;
  background-color: var(--theme-bg);
  color: var(--theme-fg);
  cursor: pointer;
}
.panel .fields details summary h2, webhook-viewer .fields details summary h2, webhook-editor .fields details summary h2, webhook-create .fields details summary h2, secrets-editor .fields details summary h2, response-viewer .fields details summary h2, request-editor .fields details summary h2 {
  display: flex;
  margin: 0;
  border: none;
  font-size: 1rem;
  font-weight: bold;
}
.panel .fields details summary h2::before, webhook-viewer .fields details summary h2::before, webhook-editor .fields details summary h2::before, webhook-create .fields details summary h2::before, secrets-editor .fields details summary h2::before, response-viewer .fields details summary h2::before, request-editor .fields details summary h2::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  aspect-ratio: 1;
  background-color: black;
  mask-image: url("/asset/icon/chevron-down.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  margin-right: 1rem;
  transition: scale 0.1s ease-in-out;
}
.panel .fields details summary h2 span, webhook-viewer .fields details summary h2 span, webhook-editor .fields details summary h2 span, webhook-create .fields details summary h2 span, secrets-editor .fields details summary h2 span, response-viewer .fields details summary h2 span, request-editor .fields details summary h2 span {
  font-weight: normal;
}
.panel .fields details summary h2 span::before, webhook-viewer .fields details summary h2 span::before, webhook-editor .fields details summary h2 span::before, webhook-create .fields details summary h2 span::before, secrets-editor .fields details summary h2 span::before, response-viewer .fields details summary h2 span::before, request-editor .fields details summary h2 span::before {
  content: "(";
  margin-left: 0.5rem;
}
.panel .fields details summary h2 span::after, webhook-viewer .fields details summary h2 span::after, webhook-editor .fields details summary h2 span::after, webhook-create .fields details summary h2 span::after, secrets-editor .fields details summary h2 span::after, response-viewer .fields details summary h2 span::after, request-editor .fields details summary h2 span::after {
  content: ")";
}
.panel .fields details summary h2::after, webhook-viewer .fields details summary h2::after, webhook-editor .fields details summary h2::after, webhook-create .fields details summary h2::after, secrets-editor .fields details summary h2::after, response-viewer .fields details summary h2::after, request-editor .fields details summary h2::after {
  display: none;
}
.panel .fields details summary::after, webhook-viewer .fields details summary::after, webhook-editor .fields details summary::after, webhook-create .fields details summary::after, secrets-editor .fields details summary::after, response-viewer .fields details summary::after, request-editor .fields details summary::after {
  background: red;
}
.panel .fields details[open] summary h2::before, webhook-viewer .fields details[open] summary h2::before, webhook-editor .fields details[open] summary h2::before, webhook-create .fields details[open] summary h2::before, secrets-editor .fields details[open] summary h2::before, response-viewer .fields details[open] summary h2::before, request-editor .fields details[open] summary h2::before {
  scale: 1 -1;
}
.panel .fields ul.multiple, webhook-viewer .fields ul.multiple, webhook-editor .fields ul.multiple, webhook-create .fields ul.multiple, secrets-editor .fields ul.multiple, response-viewer .fields ul.multiple, request-editor .fields ul.multiple {
  list-style-type: none;
  padding: 0 1rem;
}
.panel .fields ul.multiple:empty::before, webhook-viewer .fields ul.multiple:empty::before, webhook-editor .fields ul.multiple:empty::before, webhook-create .fields ul.multiple:empty::before, secrets-editor .fields ul.multiple:empty::before, response-viewer .fields ul.multiple:empty::before, request-editor .fields ul.multiple:empty::before {
  content: "There are no " attr(data-term) " added yet.";
}
.panel .fields ul.multiple > li, webhook-viewer .fields ul.multiple > li, webhook-editor .fields ul.multiple > li, webhook-create .fields ul.multiple > li, secrets-editor .fields ul.multiple > li, response-viewer .fields ul.multiple > li, request-editor .fields ul.multiple > li {
  display: flex;
  justify-content: stretch;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.panel .fields ul.multiple > li > form, webhook-viewer .fields ul.multiple > li > form, webhook-editor .fields ul.multiple > li > form, webhook-create .fields ul.multiple > li > form, secrets-editor .fields ul.multiple > li > form, response-viewer .fields ul.multiple > li > form, request-editor .fields ul.multiple > li > form {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.panel .fields ul.multiple > li label, webhook-viewer .fields ul.multiple > li label, webhook-editor .fields ul.multiple > li label, webhook-create .fields ul.multiple > li label, secrets-editor .fields ul.multiple > li label, response-viewer .fields ul.multiple > li label, request-editor .fields ul.multiple > li label {
  flex-grow: 1;
  margin-bottom: 0;
}
.panel .fields ul.multiple > li .actions, webhook-viewer .fields ul.multiple > li .actions, webhook-editor .fields ul.multiple > li .actions, webhook-create .fields ul.multiple > li .actions, secrets-editor .fields ul.multiple > li .actions, response-viewer .fields ul.multiple > li .actions, request-editor .fields ul.multiple > li .actions {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.panel .fields ul.multiple > li .actions button, webhook-viewer .fields ul.multiple > li .actions button, webhook-editor .fields ul.multiple > li .actions button, webhook-create .fields ul.multiple > li .actions button, secrets-editor .fields ul.multiple > li .actions button, response-viewer .fields ul.multiple > li .actions button, request-editor .fields ul.multiple > li .actions button {
  margin: 0;
}
.panel .fields ul.multiple > li:not(:first-of-type) label span, webhook-viewer .fields ul.multiple > li:not(:first-of-type) label span, webhook-editor .fields ul.multiple > li:not(:first-of-type) label span, webhook-create .fields ul.multiple > li:not(:first-of-type) label span, secrets-editor .fields ul.multiple > li:not(:first-of-type) label span, response-viewer .fields ul.multiple > li:not(:first-of-type) label span, request-editor .fields ul.multiple > li:not(:first-of-type) label span {
  display: none;
}

/*
 * This decorator is applied to the outer-most details element.

 TODO: Take a look at the red commas - they need shifting up a line BUT not always
 TODO: Take a look at HTML/XML opening summary markers - they aren't aligned to the left of the summaries properly
 */
.syntax-highlighter {
  position: relative;
  font-family: "Monaspace Neon", monospace;
}
.syntax-highlighter::after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  right: 0;
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
  color: var(--pal-2);
  background-color: color-mix(in srgb, var(--pal-1), var(--pal-2));
  font-weight: bold;
  pointer-events: none;
}
.syntax-highlighter-json.syntax-highlighter::after {
  content: "JSON";
}
.syntax-highlighter-xml.syntax-highlighter::after {
  content: "XML";
}
.syntax-highlighter-xml.syntax-highlighter summary {
  padding-left: 0;
  margin-left: 0;
}
.syntax-highlighter-html.syntax-highlighter::after {
  content: "HTML";
}
.syntax-highlighter-html.syntax-highlighter summary {
  padding-left: 0;
  margin-left: 0;
}
[open].syntax-highlighter > summary *, .syntax-highlighter details[open] > summary * {
  display: none !important;
}
.syntax-highlighter details {
  padding-left: 1rem;
}
.syntax-highlighter details[open] {
  display: block;
  padding-left: initial;
}
.syntax-highlighter details[open] + .syntax-array-separator {
  position: absolute;
  margin-top: -1rem;
  margin-left: 0.5rem;
}
.syntax-highlighter details:not([open]) {
  display: inline-block;
}
.syntax-highlighter details:not([open]) > summary {
  display: inline list-item;
  padding-left: 0;
}
.syntax-highlighter details:not([open]) > summary summary {
  display: inline;
}
.syntax-highlighter details:not([open]) .syntax-array-separator {
  margin-right: 0.5rem;
}
.syntax-highlighter details + .syntax-array-separator {
  display: inline-block;
}
.syntax-highlighter summary {
  position: relative;
  z-index: 1;
  padding-left: 1rem;
  margin-left: -1rem;
}
.syntax-highlighter summary > * {
  display: inline-block;
}
.syntax-highlighter summary summary {
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}
.syntax-highlighter summary > .syntax-indent {
  display: none;
}
.syntax-highlighter .scalar {
  display: inline-block;
}
.syntax-highlighter .nested {
  margin-left: 1rem;
}
.syntax-highlighter .data-structure {
  margin-top: -1rem;
}
.syntax-highlighter .data-structure > .syntax.syntax-array-bracket:last-child {
  margin-left: -1rem;
}
.syntax-highlighter .data-structure:not(.nested-0).data-structure > .syntax-array-bracket-opening:first-of-type {
  margin-left: 1.25rem;
}
.syntax-highlighter .syntax {
  white-space: pre-line;
  vertical-align: top;
}
.syntax-highlighter .syntax.syntax-array-bracket {
  color: color-mix(in srgb, var(--pal-1), var(--pal-2));
}
.syntax-highlighter .syntax.syntax-array-separator {
  color: color-mix(in srgb, var(--pal-1), var(--pal-2));
}
.syntax-highlighter .syntax.syntax-key {
  float: left;
  padding-right: 0.5rem;
}
.syntax-highlighter .syntax.syntax-tag-name {
  color: var(--pal-9);
  font-weight: bold;
}
.syntax-highlighter .syntax.syntax-tag-angle, .syntax-highlighter .syntax.syntax-attribute-equals, .syntax-highlighter .syntax.syntax-attribute-quote {
  color: color-mix(in srgb, var(--pal-1), var(--pal-2));
}
.syntax-highlighter .syntax.syntax-indent {
  display: inline-block;
  white-space: pre;
  tab-size: 4;
}
.syntax-highlighter .syntax.syntax-attribute-name {
  color: var(--pal-7);
}
.syntax-highlighter .syntax.syntax-attribute-value, .syntax-highlighter .syntax.syntax-text {
  color: var(--pal-10);
}
.syntax-highlighter .syntax.syntax-comment, .syntax-highlighter .syntax.syntax-cdata, .syntax-highlighter .syntax.syntax-processing-instruction, .syntax-highlighter .syntax.syntax-doctype, .syntax-highlighter .syntax.syntax-ellipsis {
  color: var(--pal-8);
}
.syntax-highlighter .data-element-list::before {
  content: attr(data-index) ":";
  float: left;
  margin-right: 0.5rem;
  color: var(--pal-7);
  opacity: 0.5;
}
.syntax-highlighter .type {
  white-space: pre-line;
}
.syntax-highlighter .type.type-integer, .syntax-highlighter .type.type-double, .syntax-highlighter .type.type-null, .syntax-highlighter .type.type-boolean {
  font-weight: bold;
  text-transform: uppercase;
  color: var(--pal-8);
}
.syntax-highlighter .type.type-string {
  font-weight: bold;
  color: var(--pal-10);
}

global-header {
  display: block;
  position: relative;
  background-color: var(--pal-3);
  color: var(--pal-1);
  border-bottom: 1px solid var(--pal-4);
}
global-header h1 {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 1rem;
}
global-header h1 a {
  display: flex;
  align-items: center;
  padding: 1rem 0 1rem 1.5rem;
  height: 2.5rem;
  width: 50%;
  color: var(--pal-1);
  text-decoration: none;
}
global-header h1 a::before {
  content: "";
  display: block;
  width: 2rem;
  margin-right: 0.5rem;
  aspect-ratio: 1;
  background-image: url("/asset/horse-face.png");
  background-size: 100%;
}
global-header .theme-toggle {
  position: absolute;
  left: 10rem;
  top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-left: 0.25rem;
  padding: 0;
  border: 1px solid var(--pal-4);
  border-radius: 0.375rem;
  background-color: var(--pal-3);
  color: var(--pal-1);
  cursor: pointer;
}
global-header .theme-toggle:hover, global-header .theme-toggle:focus, global-header .theme-toggle:active {
  background-color: var(--pal-4);
}
global-header .theme-toggle:hover .theme-toggle-label, global-header .theme-toggle:focus .theme-toggle-label, global-header .theme-toggle:active .theme-toggle-label {
  display: block;
}
global-header .theme-toggle::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  opacity: 0.75;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
global-header .theme-toggle[data-theme-mode=system]::before {
  background-image: url("/asset/icon/device-desktop.svg");
}
global-header .theme-toggle[data-theme-mode=light]::before {
  background-image: url("/asset/icon/sun.svg");
}
global-header .theme-toggle[data-theme-mode=dark]::before {
  background-image: url("/asset/icon/moon.svg");
}
global-header .theme-toggle .theme-toggle-label {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  z-index: 2;
  display: none;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--pal-1);
  border-radius: 0.375rem;
  background-color: var(--pal-1);
  color: var(--pal-3);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) global-header .theme-toggle::before {
    filter: invert(1);
  }
}
:root[data-theme=dark] global-header .theme-toggle::before {
  filter: invert(1);
}
global-header menu {
  display: flex;
  list-style-type: none;
  margin: 0 1rem;
  padding: 0;
  overflow-x: scroll;
}
@media (min-width: 46rem) {
  global-header menu::-webkit-scrollbar {
    display: none;
  }
}
global-header menu > li {
  border-bottom: 2px solid transparent;
}
global-header menu > li.selected {
  border-bottom-color: var(--pal-12);
}
global-header menu > li.selected a {
  opacity: 1;
}
global-header menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem;
  padding: 0.5rem;
  text-decoration: none;
  border-radius: 0.5rem;
  color: var(--pal-1);
  transition: background-color 0.1s ease-in-out;
  opacity: 0.75;
  font-weight: 500;
}
global-header menu > li > a::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  aspect-ratio: 1;
  opacity: 0.75;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
global-header menu > li > a[href^="/request"]::before {
  background-image: url("/asset/icon/upload.svg");
}
global-header menu > li > a[href^="/webhook"]::before {
  background-image: url("/asset/icon/webhook.svg");
}
global-header menu > li > a[href^="/gateway"]::before {
  background-image: url("/asset/icon/server.svg");
}
global-header menu > li > a[href^="/sponsor"]::before {
  background-image: url("/asset/icon/sponsor-tiers.svg");
}
global-header menu > li > a[href^="/readme"]::before {
  background-image: url("/asset/icon/book.svg");
}
global-header menu > li > a[href^="/mailing-list"] {
  white-space: nowrap;
}
global-header menu > li > a[href^="/mailing-list"]::before {
  background-image: url("/asset/icon/mail.svg");
}
global-header menu > li > a[href^="https://github.com"]::before {
  background-image: url("/asset/icon/mark-github.svg");
}
global-header menu > li > a[href*="://"]::after {
  content: "";
  display: inline-block;
  width: 0.9rem;
  aspect-ratio: 1;
  opacity: 0.75;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/asset/icon/link-external.svg");
}
global-header menu > li > a:hover, global-header menu > li > a:focus {
  background-color: var(--pal-4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) global-header menu > li > a::before, :root:not([data-theme=light]) global-header menu > li > a[href*="://"]::after {
    filter: invert(1);
  }
}
:root[data-theme=dark] global-header menu > li > a::before, :root[data-theme=dark] global-header menu > li > a[href*="://"]::after {
  filter: invert(1);
}

request-editor > h1 {
  height: 5rem;
}
@media (min-width: 46rem) {
  request-editor > h1 {
    height: auto;
  }
}
request-editor form.delete {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 46rem) {
  request-editor form.delete {
    flex-direction: row;
  }
}
request-editor textarea[name=message] {
  resize: vertical;
  overflow-x: scroll;
  white-space: pre;
  height: auto;
}
request-editor form.primary {
  transition: opacity 0.5s;
}
@keyframes loading {
  from {
    opacity: 1;
  }
}
request-editor form.primary.flux-form-waiting {
  cursor: wait;
  opacity: 0.5;
  animation: loading 1s 1s both;
}
request-editor form.primary.flux-form-waiting button {
  pointer-events: none;
}

webhook-sidebar, request-sidebar {
  --theme-bg: var(--pal-2);
  --theme-fg: var(--pal-1);
  --theme-border: var(--pal-4);
  --theme-selected: var(--pal-7);
  display: block;
  flex-shrink: 0;
}
@media (min-width: 46rem) {
  webhook-sidebar, request-sidebar {
    width: 24rem;
  }
}
webhook-sidebar menu, request-sidebar menu {
  list-style-type: none;
  margin: 0;
  margin-top: 1rem;
  padding: 0;
}
webhook-sidebar menu > li, request-sidebar menu > li {
  position: relative;
  margin: 0.5rem 0;
  user-select: none;
}
webhook-sidebar menu > li.end-of-section::after, request-sidebar menu > li.end-of-section::after {
  content: "";
  display: block;
  margin: calc(0.5rem + 0.5px) auto 0.75rem auto;
  width: calc(100% - 1rem);
  height: 1px;
  background: var(--theme-border);
}
webhook-sidebar menu > li.selected a, request-sidebar menu > li.selected a {
  font-weight: bold;
}
webhook-sidebar menu > li.selected a::after, request-sidebar menu > li.selected a::after {
  --theme-bg: var(--theme-selected);
  content: "";
  position: absolute;
  left: -8px;
  display: inline-block;
  border-radius: 0.5rem;
  width: 4px;
  height: 1.5rem;
}
webhook-sidebar menu > li.selected a, request-sidebar menu > li.selected a, webhook-sidebar menu > li:hover a, request-sidebar menu > li:hover a {
  --theme-bg: var(--pal-3);
  --theme-fg: var(--pal-1);
}
webhook-sidebar menu > li.flux-drag-order-dragging a, request-sidebar menu > li.flux-drag-order-dragging a {
  outline: 4px solid var(--pal-5);
}
webhook-sidebar menu > li a, request-sidebar menu > li a {
  position: relative;
  display: block;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  color: var(--theme-fg);
  background-color: var(--theme-bg);
}
webhook-sidebar menu > li a::before, request-sidebar menu > li a::before {
  content: "";
  display: block;
  float: left;
  width: 1.25rem;
  margin-right: 0.5rem;
  aspect-ratio: 1;
  opacity: 0.75;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
webhook-sidebar menu > li a[href$="/secrets/"]::before, request-sidebar menu > li a[href$="/secrets/"]::before {
  background-image: url("/asset/icon/key-asterisk.svg");
}
webhook-sidebar menu > li a[href*="/_new/"]::before, request-sidebar menu > li a[href*="/_new/"]::before {
  background-image: url("/asset/icon/diff-added.svg");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) webhook-sidebar menu > li a::before, :root:not([data-theme=light]) request-sidebar menu > li a::before {
    filter: invert(1);
  }
}
:root[data-theme=dark] webhook-sidebar menu > li a::before, :root[data-theme=dark] request-sidebar menu > li a::before {
  filter: invert(1);
}
webhook-sidebar menu > li form.drag-drop, request-sidebar menu > li form.drag-drop {
  display: flex;
  position: absolute;
  top: 0.5rem;
  right: 1.5rem;
  bottom: 0.5rem;
  transition: opacity 0.1s ease-in-out;
}
@media (hover: hover) {
  webhook-sidebar menu > li form.drag-drop, request-sidebar menu > li form.drag-drop {
    opacity: 0;
  }
}
webhook-sidebar menu > li form.drag-drop .drag-handle, request-sidebar menu > li form.drag-drop .drag-handle {
  outline: none;
}
webhook-sidebar menu > li form.drag-drop .drag-handle::before, request-sidebar menu > li form.drag-drop .drag-handle::before {
  content: "";
  display: block;
  height: 100%;
  aspect-ratio: 1;
  background-color: var(--pal-1);
  mask-image: url("/asset/icon/grip-horizontal.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  opacity: 0.5;
}
webhook-sidebar menu > li form.drag-drop .drag-handle:hover::before, request-sidebar menu > li form.drag-drop .drag-handle:hover::before {
  opacity: 1;
}
webhook-sidebar menu > li form.drag-drop input, request-sidebar menu > li form.drag-drop input, webhook-sidebar menu > li form.drag-drop button, request-sidebar menu > li form.drag-drop button {
  padding: 0;
  width: 3rem;
  height: 100%;
}
webhook-sidebar menu > li:hover form.drag-drop, request-sidebar menu > li:hover form.drag-drop {
  opacity: 1;
}

request-topbar > button {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1rem;
}
@media (min-width: 46rem) {
  request-topbar > button {
    display: none;
  }
}
request-topbar dialog#mobileMenu {
  max-width: 100%;
  width: 100%;
  min-height: 12rem;
  margin-top: 0;
  border: none;
  padding: 0;
  background-color: transparent;
}
request-topbar dialog#mobileMenu::backdrop {
  background-color: transparent;
  backdrop-filter: blur(0.5rem);
}
@media (min-width: 46rem) {
  request-topbar dialog#mobileMenu {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    position: absolute;
    top: 0;
    right: 0;
    min-height: 100%;
    width: 22rem;
    margin-right: 0;
  }
  request-topbar dialog#mobileMenu:focus {
    outline: none;
  }
}
@media (min-width: 76rem) {
  request-topbar dialog#mobileMenu {
    min-height: 0;
    padding-bottom: 0;
  }
}
request-topbar dialog#mobileMenu .top-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  top: 0;
  right: 0;
  padding: 1rem;
  background-color: var(--pal-3);
  width: auto;
}
@media (min-width: 46rem) {
  request-topbar dialog#mobileMenu .top-actions {
    justify-content: flex-end;
    padding: 0;
  }
}
@media (min-width: 46rem) {
  request-topbar dialog#mobileMenu .top-actions button.positive {
    flex-grow: 1;
  }
}
request-topbar dialog#mobileMenu .top-actions button.share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
request-topbar dialog#mobileMenu .top-actions button.share::after {
  content: "";
  display: inline-block;
  width: 1.25rem;
  aspect-ratio: 1;
  background-color: black;
  mask-image: url("/asset/icon/share.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}
request-topbar dialog#mobileMenu .top-actions a {
  color: var(--pal-1);
  text-decoration: none;
  margin: 0 1rem;
}
request-topbar dialog#mobileMenu .top-actions a:hover, request-topbar dialog#mobileMenu .top-actions a:focus {
  text-decoration: underline;
}
request-topbar dialog#mobileMenu form {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  right: 0;
  padding: 1rem;
  background-color: var(--pal-3);
  width: auto;
}
request-topbar dialog#mobileMenu form:last-of-type {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--pal-4);
}
@media (min-width: 46rem) {
  request-topbar dialog#mobileMenu form:last-of-type {
    padding-bottom: 1rem;
    border-bottom: none;
  }
}
@media (min-width: 46rem) {
  request-topbar dialog#mobileMenu form {
    justify-content: stretch;
    padding: 0;
    background-color: transparent;
  }
}
request-topbar dialog#mobileMenu form[method=dialog] {
  justify-content: space-between;
  align-items: end;
}
@media (min-width: 46rem) {
  request-topbar dialog#mobileMenu form[method=dialog] {
    display: none;
  }
}
request-topbar dialog#mobileMenu form[method=dialog]::before {
  content: "api.horse";
  display: block;
  font-weight: bold;
  padding: 0.5rem 3rem;
  background-image: url("/asset/horse-face.png");
  background-size: 2rem;
  background-repeat: no-repeat;
  background-position-x: 0.5rem;
  background-position-y: 0.15rem;
}
@media (min-width: 46rem) {
  request-topbar dialog#mobileMenu form[method=dialog]::before {
    content: "";
    display: none;
  }
}
request-topbar dialog#mobileMenu form.collections {
  bottom: 0;
}
request-topbar dialog#mobileMenu form.collections span {
  display: none;
}
@media (min-width: 46rem) {
  request-topbar dialog#mobileMenu form.collections label {
    flex-grow: 1;
  }
}
request-topbar dialog#mobileMenu form.collections label select {
  text-align: left;
}
request-topbar dialog#mobileMenu form.collections label select.single {
  appearance: none;
  pointer-events: none;
  border: none;
  outline: none;
  background: transparent;
  text-align: right;
  font-weight: bold;
}
request-topbar dialog#mobileMenu form.collections .actions {
  display: none;
}
request-topbar dialog#mobileMenu.shared button:not(.shared-show) {
  display: none;
}
request-topbar dialog#mobileMenu:not(.shared) *.shared-show-only {
  display: none;
}
request-topbar dialog#shareModal label {
  position: relative;
}
request-topbar dialog#shareModal label input {
  width: calc(100% - 4rem);
}
request-topbar dialog#shareModal label button.copy-share-link {
  position: absolute;
  bottom: 0;
  right: 0;
}
request-topbar dialog#shareModal label button.copy-share-link span {
  display: none;
}
request-topbar dialog#shareModal label button.copy-share-link::after {
  content: "";
  display: inline-block;
  width: 1.25rem;
  aspect-ratio: 1;
  background-color: black;
  mask-image: url("/asset/icon/copy.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}

webhook-viewer > ul > li > details > summary, response-viewer > ul > li > details > summary {
  cursor: pointer;
  margin-bottom: 1rem;
  --theme-bg: var(--pal-3);
  --theme-fg: var(--pal-1);
  --theme-border: var(--pal-4);
}
webhook-viewer > ul > li > details > summary::marker, response-viewer > ul > li > details > summary::marker {
  content: "";
}
webhook-viewer > ul > li > details > summary:hover:not(:focus), response-viewer > ul > li > details > summary:hover:not(:focus) {
  outline: 2px solid var(--theme-border);
  outline-offset: 2px;
}
webhook-viewer > ul > li > details > summary .method, response-viewer > ul > li > details > summary .method {
  font-family: monospace;
  font-weight: bold;
}
webhook-viewer > ul > li > details > summary .status, response-viewer > ul > li > details > summary .status {
  display: inline-block;
  padding: 0.5rem;
  background-color: var(--theme-bg);
  color: var(--theme-fg);
  border: 1px solid var(--theme-border);
  border-radius: 0.5rem;
}
webhook-viewer > ul > li > details > summary .id, response-viewer > ul > li > details > summary .id {
  display: inline-block;
  padding: 0.5rem;
  background-color: var(--pal-5);
  color: var(--pal-1);
  border: 1px solid var(--pal-4);
  border-radius: 0.5rem;
}
webhook-viewer > ul > li > details > summary time, response-viewer > ul > li > details > summary time {
  opacity: 0.5;
}

response-viewer button[name=do][value=clear] {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 0.75rem;
}
response-viewer > ul {
  list-style-type: none;
  padding: 0;
}
response-viewer > ul:empty::before {
  content: "Send a request to get a response";
}
response-viewer > ul > li > details {
  margin-bottom: 2rem;
}
response-viewer > ul > li > details[open] {
  margin-bottom: 4rem;
}
response-viewer > ul > li > details > .size::before {
  content: "(";
}
response-viewer > ul > li > details > .size::after {
  content: ")";
}

secrets-editor .kvp > li {
  justify-content: flex-start;
}
secrets-editor .kvp > li > span:first-of-type {
  display: flex;
  width: 16rem;
}
secrets-editor .kvp > li > span:first-of-type::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  aspect-ratio: 1;
  background-color: black;
  mask-image: url("/asset/icon/lock.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  margin-right: 0.5rem;
}
secrets-editor .kvp > li > span:last-of-type {
  flex-grow: 1;
}

webhook-editor form.webhook {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: last baseline;
}
webhook-editor form.webhook button {
  width: 6rem;
}
webhook-editor > ul {
  list-style-type: none;
  padding: 0;
}
webhook-editor > ul > li form {
  display: flex;
  gap: 1rem;
}
webhook-editor > ul > li form .actions {
  display: flex;
  align-items: last baseline;
  opacity: 0;
}
webhook-editor > ul > li form .actions button {
  width: 6rem;
}
webhook-editor > ul > li form .actions button[value=add-endpoint] {
  display: none;
}
webhook-editor > ul > li form:hover .actions, webhook-editor > ul > li form:focus-within .actions {
  opacity: 1;
}
webhook-editor > ul > li:first-of-type .actions button[value=add-endpoint] {
  display: block;
}
webhook-editor > ul > li:first-of-type .actions button[value=delete-endpoint] {
  display: none;
}

webhook-viewer > ul {
  list-style-type: none;
  padding: 0;
}
webhook-viewer > ul > li > details {
  margin-bottom: 2rem;
}
http-message {
  display: block;
  --theme-bg: var(--pal-3);
  --theme-border: var(--pal-4);
}
http-message details.headers {
  margin-top: 1rem;
}
http-message details.headers > summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Monaspace Neon", monospace;
}
http-message details.headers > summary::marker {
  content: "";
}
http-message details.headers > summary::before {
  content: "Headers ";
  font-weight: bold;
}
http-message details.headers > summary:hover, http-message details.headers > summary:focus {
  text-decoration: underline;
  cursor: pointer;
}
http-message details.headers[open] > summary span {
  display: none;
}
http-message details.headers ul {
  list-style-type: none;
  background-color: var(--theme-bg);
  border: 1px solid var(--theme-border);
  padding: 0.5rem;
  border-radius: 0.25rem;
  font-family: "Monaspace Neon", monospace;
  margin-top: 1rem;
  overflow-x: scroll;
}
http-message details.headers ul > li {
  white-space: nowrap;
}
http-message details.headers ul > li > .key {
  font-weight: bold;
}
http-message .response-image,
http-message .response-body {
  position: relative;
  margin-top: 3rem;
  background-color: var(--theme-bg);
  border: 1px solid var(--theme-border);
  border-radius: 0.25rem;
}
http-message .response-image::before,
http-message .response-body::before {
  position: absolute;
  display: block;
  content: "Body";
  font-weight: bold;
  margin-bottom: 1rem;
  top: -2rem;
  left: 0;
  font-family: sans-serif;
}
http-message .response-image {
  padding: 1rem;
  overflow: auto;
}
http-message .response-image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
http-message .response-body {
  padding: 0.5rem;
  font-family: "Monaspace Neon", monospace;
  white-space: pre;
  overflow-x: scroll;
}
http-message .response-body:empty {
  background-color: transparent;
  border: none;
  padding-left: 0;
}
http-message .response-body:empty::after {
  content: "There is no response body";
  font-style: italic;
}

article p {
  line-height: 1.5;
}
article ul li, article ol li {
  margin-bottom: 0.5rem;
}
article ul > li:has(input[type=checkbox]) {
  display: flow-root;
  list-style-type: none;
}
article ul > li:has(input[type=checkbox]) input {
  float: left;
  width: auto;
  margin: 0;
  margin-right: 0.5rem;
}

body {
  margin: 0;
  background-color: var(--pal-2);
  color: var(--pal-1);
}

textarea, select, input, button {
  --theme-ui--bg: var(--pal-3);
  --theme-ui--fg: var(--pal-1);
  --theme-ui--border: var(--pal-4);
  --theme-ui--outline: transparent;
  font-family: "Mona Sans", sans-serif;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  border: 1px solid var(--theme-ui--border);
  background-color: var(--theme-ui--bg);
  color: var(--theme-ui--fg);
  transition: background-color 0.1s;
  outline: 2px solid var(--theme-ui--outline);
}
textarea:hover:not(:focus), select:hover:not(:focus), input:hover:not(:focus), button:hover:not(:focus) {
  --theme-ui--border: var(--pal-7);
}
textarea:focus, select:focus, input:focus, button:focus {
  --theme-ui--bg: var(--pal-2);
  --theme-ui--outline: var(--pal-7);
  --theme-outline: var(--theme-ui--outline);
  outline-offset: 2px;
}
textarea:focus:active, select:focus:active, input:focus:active, button:focus:active {
  outline-offset: 0;
}

button {
  --theme-bg: var(--pal-3);
  --theme-fg: var(--pal-1);
  --theme-border: var(--pal-4);
  width: auto;
  background-color: var(--theme-bg);
  color: var(--theme-fg);
  border: 1px solid var(--theme-border);
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: pointer;
}
button:hover {
  background-color: color-mix(in srgb, var(--theme-bg), var(--theme-fg) 5%);
}
button:focus {
  background-color: var(--theme-bg);
}
button:active {
  background-color: color-mix(in srgb, var(--theme-bg), var(--theme-fg) 20%);
}
button.positive {
  --theme-bg: var(--pal-8);
  --theme-fg: white;
  --theme-border: var(--pal-9);
}
button.negative {
  --theme-bg: var(--pal-3);
  --theme-fg: var(--pal-10);
  --theme-border: var(--pal-11);
}
button.negative:hover, button.negative:focus, button.negative:active {
  --theme-bg: var(--pal-10);
  --theme-fg: white;
  --theme-ui--border: var(--theme-border);
  --theme-ui--outline: var(--theme-border);
}

dialog {
  z-index: 100;
}
dialog:not(.special) {
  border-radius: 1rem;
  border: none;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
}
dialog:not(.special) form {
  width: 24rem;
}
dialog:not(.special) form > h1 {
  font-size: 1rem;
}
dialog:not(.special) form label {
  display: block;
  margin: 1rem 0;
}
dialog:not(.special) form label > span {
  display: block;
  margin: 0.5rem 0;
}
dialog:not(.special) form .actions {
  display: flex;
  justify-content: space-between;
}
dialog:not(.special) form .actions.important {
  justify-content: center;
}
dialog:not(.special) form .actions .positive {
  order: 1;
}
dialog:focus {
  outline-color: var(--pal-1);
}
dialog hr {
  height: 1px;
  border: none;
  background: var(--pal-1);
  margin: 2rem 0;
}

html {
  font-size: 14px;
  font-family: sans-serif;
  overflow-x: hidden;
}
html:has(dialog.no-scroll[open]) {
  overflow: hidden;
}

input[type=checkbox], input[type=radio] {
  float: left;
  width: auto;
}

main {
  display: flex;
  flex-direction: column;
}
@media (min-width: 46rem) {
  main {
    flex-direction: row;
  }
}
main section {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

main {
  margin-bottom: 4rem;
}

textarea {
  height: 6rem;
}

body.dir--_error main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.dir--_error main img {
  max-width: 24rem;
  max-height: 40svh;
  margin-top: 4rem;
}
body.dir--_error main h1 {
  font-size: 5rem;
  margin: 0;
}
@media (min-width: 76rem) {
  body.dir--_error main h1 {
    font-size: 10rem;
  }
}
body.dir--_error main details {
  max-width: 46rem;
}

@keyframes greenfade {
  from {
    background-color: #c7f87b;
  }
}
body.uri--mailing-list .thanks {
  margin-bottom: 16rem;
  animation: greenfade 0.5s 1s 1 ease-in-out both;
}
body.uri--mailing-list form {
  margin-top: 4rem;
}
body.uri--mailing-list form label {
  display: block;
  margin: 1rem 0;
}
body.uri--mailing-list form label > span:first-child {
  display: block;
  font-weight: bold;
  margin: 0.5rem 0;
}

:focus {
  --theme-outline: var(--pal-7);
  outline: 2px solid var(--theme-outline);
  outline-offset: 2px;
}
:focus:active {
  outline-offset: 0;
}

form.submitting {
  cursor: progress;
  opacity: 0.5;
  transition: opacity 0.25s ease-in-out;
}
form.submitting * {
  cursor: progress;
}

body {
  min-height: 100svh;
}

body > footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--pal-3);
  border-top: 1px solid var(--pal-4);
}
@media (min-width: 46rem) {
  body > footer {
    display: flex;
    gap: 2rem;
    justify-content: center;
  }
}
body > footer p {
  margin: 0;
  text-align: center;
}
body > footer p a {
  display: block;
  padding: 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  color: var(--pal-1);
  opacity: 0.5;
}
body > footer p a:hover {
  opacity: 1;
}

/*# sourceMappingURL=style.css.map */