:root {
  --default-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
  --background-primary: #262626;
  --background-primary-alt: #1a1a1a;
  --font-monospace: "Source Code Pro", monospace;
  --text-normal: #dcddde;
  --editor-font-size: 16px;

  /* canvas.css stuff */
  --color-bg-1: var(--background-primary-alt);
  --color-bg-2: var(--background-primary);
  --color-tx-1: #fff;
  --color-tx-2: #a28397;
  --color-ui-1: #575757;
  --color-ui-2: #68154C;
  --color-ui-3: #b40e7a;
  --color-ax-1: #8B0A5F;

  --canvas-card-red: #fb464c;
  --canvas-card-dark-red: color-mix(in srgb, var(--canvas-card-red) 20%, black);
  --canvas-card-orange: #e9973f;
  --canvas-card-dark-orange: color-mix(in srgb, var(--canvas-card-orange) 20%, black);
  --canvas-card-yellow: #e0de71;
  --canvas-card-dark-yellow: color-mix(in srgb, var(--canvas-card-yellow) 20%, black);
  --canvas-card-green: #44cf6e;
  --canvas-card-dark-green: color-mix(in srgb, var(--canvas-card-green) 20%, black);
  --canvas-card-cyan: #53dfdd;
  --canvas-card-dark-cyan: color-mix(in srgb, var(--canvas-card-cyan) 20%, black);
  --canvas-card-purple: #a882ff;
  --canvas-card-dark-purple: color-mix(in srgb, var(--canvas-card-purple) 20%, black);

  text-rendering: optimizeLegibility;
  font-family: var(--default-font);
  line-height: 1.5em;
  font-size: 16px;
  background-color: var(--background-primary);
  color: var(--text-normal);
}

code {
  color: #c7254e;
  font-family: var(--font-monospace);
  background-color: var(--background-primary-alt);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 0.85em;
  text-wrap: auto;
}

/* split toc and text */

body {
  margin: 2rem;
}

footer {
  flex: 0 0 100%;
}

.toc {
  flex: 1 1 auto;
  margin-bottom: 4rem;
  z-index: 2;
}

.text {
  flex: 1 1 auto;
  width: 100%;
}

/* <a> links still live in a dark background, so fix that */
a {
  color: aqua;
  overflow-wrap: break-word;
}

a:hover {
  color: white;
}

/* toc links are treated differently */
.toc-link {
  color: aliceblue;
}

/* The following CSS style was generated by ChatGPT as a shitpost.
 *
 * It incredibly works.
 *
 * The prompts were:
 *  "Generate CSS that creates indentation on a tree made out of `<details>` elements."
 *
 * And then, for the `details > *` block:
 *  "Given this CSS, elements that are children of `<details>`, but are not `<details>` themselves, are not indented a level above. Can you generate CSS that does such action?"
 */

/* Set the initial margin for all details elements to zero */
details {
  margin-left: 0;
}

/* Indent all details elements inside another details element */
details details {
  margin-left: 1.5em; /* adjust this value to change the indentation */
}

/* Indent direct children of details elements */
details > * {
  margin-left: 1.5em; /* adjust this value to change the indentation */
}

/* Reset the margin for the summary element */
details summary {
  margin-left: 0;
}

/* end ChatGPT */

nav ul {
  margin: 0;
}

nav > ul {
  padding-left: 0;
}

/* Highlight hovered links, as well as `<summary>`s that are direct descendants of `<details>` elements that have a
 * hovered link as a child, as well as `<li>`s that have a hovered link as a child. This ensures that the marker
 * elements also get this hover styling. */
nav a:hover,
nav details:has(a:hover) > summary,
nav li:has(a:hover) {
  color: #99cafe;
}

/* As above.
 * Highlight current links, as well as `<summary>`s that are direct descendants of `<details>` elements that have a
 * current link as a child, as well as `<li>`s that have a current link as a child. This ensures that the marker
 * elements also get this current styling. */
nav a[aria-current="page"],
nav details:has(a[aria-current="page"]) > summary,
nav li:has(a[aria-current="page"]) {
  font-weight: bold;
  color: #66b0ff;
}

.tag-page {
  display: flex;
  flex-flow: row wrap;
}

.page-preview {
  border-style: solid;
  border-width: 4px;
  border-color: #888888;
  width: 60rem;
  flex: 0 0 60rem;
  padding: 2rem;
  background-image: linear-gradient(45deg, var(--background-primary) 0%, var(--background-primary) 70%, transparent 90%), var(--bg-image);
  background-size: 100% 100%, contain;
  background-position: 0 0, right center;
  background-repeat: no-repeat;
}

.page-preview-text {
  color: white;
}

.tag-box {
  border-style: solid;
  border-width: 4px;
  border-color: #888888;
  flex: 0 0 10rem;
  padding: 10px;
  padding-top: 1px;
}

.heading {
  font-size: 1.1rem;
  font-weight: bold;
}

@media (min-width: 80rem) {
  body {
    display: flex;
    flex-flow: row;
    align-items: flex-start;

    /* this is required so that i can put the footer all the way at the bottom without it messing up the existing flex
    layout -- it's a bit hacky but it works. without this the footer sticks at the bottom of the viewport when the page
    is scrolled all the way up, not to the bottom of the page */
    position: relative;
  }
  .toc {
    position: sticky;
    top: 2rem;
    max-width: 24rem;

    /* allow the toc to scroll if it gets taller than the viewport */
    overflow-y: auto;
    max-height: calc(100vh - 2rem);
    padding-right: 2rem;
  }
  .text {
    margin: 0 auto 2rem 1%;
    max-width: 50rem;
  }
  .tag-toc {
    position: sticky;
    top: 2rem;
    max-width: 24rem;

    /* allow the toc to scroll if it gets taller than the viewport */
    /* overflow-y: auto; */
    max-height: calc(100vh - 2rem);
    padding-right: 2rem;
  }
  .tag-text {
    margin: 0 auto 2rem 1%;
  }
  footer {
    /* these two are what make the footer actually stick to the bottom */
    position: absolute;
    bottom: 0;
  }
}

img {
  max-width: 100%;
}

video {
  max-width: 100%;
}

table {
  border-collapse: collapse;
  border: 2px solid purple;
  margin-bottom: 1%;
}

tr th, td {
  padding: 3px;
  border: 1px solid gray;
}

/* canvas.css (cooked by me) */

.o2w-canvas-color-1 {
  --color-ui-1: var(--canvas-card-red);
  --color-bg-1: var(--canvas-card-dark-red);
}
.o2w-canvas-color-2 {
  --color-ui-1: var(--canvas-card-orange);
  --color-bg-1: var(--canvas-card-dark-orange);
}
.o2w-canvas-color-3 {
  --color-ui-1: var(--canvas-card-yellow);
  --color-bg-1: var(--canvas-card-dark-yellow);
}
.o2w-canvas-color-4 {
  --color-ui-1: var(--canvas-card-green);
  --color-bg-1: var(--canvas-card-dark-green);
}
.o2w-canvas-color-5 {
  --color-ui-1: var(--canvas-card-cyan);
  --color-bg-1: var(--canvas-card-dark-cyan);
}
.o2w-canvas-color-6 {
  --color-ui-1: var(--canvas-card-purple);
  --color-bg-1: var(--canvas-card-dark-purple);
}

/* canvas.css (should be synced with upstream)
 */

/* Canvas area */
#home {
  overflow: hidden;
}
#container {
  touch-action: none;
  display: flex;
  flex: 1;
  flex-direction: row;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#canvas-container {
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
  background-color: var(--color-bg-2);
  background-image: radial-gradient(var(--color-ui-1) calc(var(--scale)*0.5px + 0.5px), transparent 0);
  background-size: calc(var(--scale) * 20px) calc(var(--scale) * 20px);
  overflow: hidden;
  background-position: calc(var(--pan-x) - 19px) calc(var(--pan-y) - 19px);
}
#canvas-edges,
#canvas-nodes {
  opacity: 0;
  transform: translate(var(--pan-x), var(--pan-y)) scale(var(--scale));
  transform-origin: left top;
}
#canvas-edges {
  z-index: 150;
  pointer-events: none;
  user-select: none;
  overflow:visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#canvas-edges path {
  stroke: var(--color-ui-3);
  stroke-width: 2;
  fill: none;
}
#arrowhead {
  fill: var(--color-ui-3);
}
.will-pan {
  cursor: grab;
}

/* Canvas output pane */
#output.hidden {
  transform: translateX(120%);
}
#output {
  position: fixed;
  height: 92vh;
  top: 1rem;
  right: 1rem;
  bottom: auto;
  border-radius: 12px;
  color: var(--color-tx-1);
  background-color: var(--color-bg-1);
  border: 1px solid var(--color-ui-1);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);;
  z-index: 0;
  width: 24em;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  transition: transform 200ms;
}
#output p {
  font-size: 90%;
  line-height: 1.3;
  padding-right: 0.5em;
}
#output-code {
  color-scheme: dark;
  flex-grow: 1;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  border-top: 1px solid var(--color-ui-1);
  border-bottom: 1px solid var(--color-ui-1);
}
#output pre {
  color-scheme: dark;
  width: 100%;
  padding: 0.5em;
  margin: 0;
}
.code-footer,
.code-header {
  font-size: 80%;
  font-weight: 500;
  padding: 0;
  display: flex;
  align-items: center;
  color: var(--color-tx-2);
  gap: 8px;
  padding: 1rem;
}
.code-footer {
  justify-content: center;
}
.code-header .language {
  flex-grow: 1;
}
.close-output {
  font-weight: 300;
  cursor: pointer;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  font-size: 24px;
  line-height: 0;
  display: flex;
  align-items: center;
  margin-top: -4px;
}
.close-output:hover {
  color: var(--color-tx-1);
}

/* Pages */
.page {
  padding: 36px 36px 48px;
  max-width: 48em;
  margin: 0 auto;
}
/* o2w
nav {
  padding: 24px 36px;
  max-width: 48em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
*/
nav #logo {
  flex-grow: 1;
}
nav .link {
  color: var(--color-ax-1);
  text-decoration: none;
  padding: 0.25em 0.5em;
  border-radius: 6px;
}
/* o2w
nav .link:hover {
  color: var(--color-bg-1);
  background-color: var(--color-ax-1);
}
*/
.hidenav #navbar {
 display: none;
}

/* Specific nodes */
#logo {
  border-radius: 8px;
  line-height: 0;
  z-index: 100;
  padding: 4px 12px 4px 4px;
}
#logo .node-name {
  top: -1.25em;
  padding-left: 4px;
}
#nav {
  z-index: 90;
  white-space: nowrap;
  padding-right: 48px;
}
#readme {
  width: 480px;
  padding: 36px;
  z-index: 80;
}
#spec {
  width: 480px;
  height: 480px;
  z-index: 70;
}


/* General node styling */
.node {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  position: absolute;
  display: block;
}
.node.is-active {
  box-shadow:
    0 0 0 2px var(--color-ui-3);
}
.node.is-dragging {
  cursor: grabbing;
  box-shadow:
    0 0 0 2px var(--color-ui-3),
    0 5px 15px rgba(0,0,0,0.2);
}
.node.is-dragging iframe {
  pointer-events: none;
}
.node:hover .node-name {
  opacity: 1;
  color: var(--color-tx-1);
  border-radius: 8px 8px 0 0;
}
.node-name {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  cursor: grab;
  opacity: 1;
  position: absolute;
  height: 2.25em;
  padding: 0.25em 0.5em;
  width: 100%;
  top: -2.25em;
  left: 0;
  color: var(--color-ui-2);
  font-size: calc(var(--font-smaller) * 1/var(--scale));
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.node.is-dragging .node-name {
  cursor: grabbing;
}
.node-link,
.node-text {
  background-color: var(--color-bg-1);
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--color-ui-1);
}
.node-file img {
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
.node-text-content {
  padding: 12px 24px;
}

/* Canvas controls */
#controls {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Page content */
/* o2w
h1 {
  line-height: 1.1;
  margin-top: 0.25em;
}
h2 {
  line-height: 1.2;
  margin-bottom: 0em;
  margin-top: 1.5em;
}
h2 + p {
  margin-top: 0.5em;
}

ul + h2,
ul + h3,
p + h2,
p + h3 {
  margin-top: 1.5em;
}

h2 + h3 {
  margin-top: 0.75em;
}

a {
  font-weight: 600;
  color: var(--color-tx-1);
  text-decoration: underline;
}
small {
  color: var(--color-tx-2);
}
small a {
  font-weight: 400;
  color: var(--color-tx-2);
}
hr {
  margin: 0;
  border: 0;
  height: 1px;
  background-color: var(--color-ui-1);
}
iframe {
  -webkit-appearance: none;
  border: none;
  outline: none;
  margin: 0;
  vertical-align: bottom;
  border-radius: 8px;
}
img {
  vertical-align: bottom;
}
code {
  -webkit-appearance: none;
  font-family: var(--font-mono);
  cursor: text;
}
pre {
  -webkit-appearance: none;
  font-family: var(--font-mono);
  background-color: transparent;
  border-radius: 4px;
  padding: 0;
  font-size: 85%;
  cursor: text;
}
pre:active,
pre:focus {
  outline: none;
  border: none;
}
pre code {
  color: var(--color-tx-2);
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
}
code {
  font-family: var(--font-mono);
  background-color: var(--color-bg-2);
  border: 1px solid var(--color-ui-1);
  border-radius: 4px;
  padding: 0 0.2em;
  font-size: 85%;
}
ul {
  padding-inline-start: 2em;
}
li::marker {
  color: var(--color-tx-2);
}

table {
  margin-top: 1.5em;
  margin-bottom: 2.5em;
  border-collapse:collapse;
  border-spacing:0;
}
tr {
  border-bottom: 1px solid var(--color-ui-1);
}
td {
  padding: 0.5em 1em 0.5em 0;
  line-height: 1.3;
}
th:not(:last-child) {
  padding-right: 1em;
}
td:last-child {
  padding-right: 0;
}
th {
  text-align: left;
  font-weight: 600;
  padding: 0 1em 0.5em 0;
}

button {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  font-family: var(--font-content);
  background: var(--color-bg-1);
  outline: none;
  border: 1px solid var(--color-ui-1);
  padding: 4px 8px;
  color: var(--color-tx-1);
  border-radius: 4px;
  font-weight: 500;
}
button:hover {
  border-color: var(--color-ui-2);
}
*/
.theme-dark button {
  background-color: var(--color-ui-1);
  color: var(--color-tx-2);
  border: 1px solid var(--color-ui-2);
}
.theme-dark button:hover {
  color: var(--color-tx-1);
  border: 1px solid var(--color-ui-3);
}

/* o2w
@media (max-width: 800px) {
  body:not(.hidenav) nav {
    padding: 24px;
    gap: 0;
  }
  body:not(.hidenav) .page {
    padding: 24px 24px 48px 24px;
  }
  #controls {
    bottom: 0;
    right: 0;
    left: 0;
    padding: 1rem;
    border-top: 1px solid var(--color-ui-1);
    width: 100%;
    background-color: var(--color-bg-1);
    justify-content: center;
    height: 48px;
  }
  #output {
    border-radius: 0;
    border: none;
    left: 0;
    top: 0;
    z-index: 200;
    width: 100vw;
    height: calc(100% - 48px);
    transition: none;
    max-width: 100vw;
    box-shadow: none;
  }
  #output-code {
    padding: 1rem 1rem 6rem;
  }
  .code-footer {

  }
}
*/

.pygments .w {
  tab-size: 4;
}

.tag-reference {
  text-align: center;
  border: 1px solid var(--color-ui-1, #6688);
  border-radius: 0.75em;
}

.tag-reference-text {
  color: white;
  font-size: 0.85rem;
}

.tag-reference-number {
  color: gray;
}