@charset "UTF-8";
@font-face {
  font-family: "Andika";
  src: url("../fonts/andika/Andika-Regular.woff2") format("woff2"), url("../fonts/andika/Andika-Regular.woff") format("woff");
  /* Firefox >= 3.6, any other modern browser */
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Andika";
  src: url("../fonts/andika/Andika-Italic.woff2") format("woff2"), url("../fonts/andika/Andika-Italic.woff") format("woff");
  /* Firefox >= 3.6, any other modern browser */
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Andika";
  src: url("../fonts/andika/Andika-Bold.woff2") format("woff2"), url("../fonts/andika/Andika-Bold.woff") format("woff");
  /* Firefox >= 3.6, any other modern browser */
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Andika";
  src: url("../fonts/andika/Andika-BoldItalic.woff2") format("woff2"), url("../fonts/andika/Andika-BoldItalic.woff") format("woff");
  /* Firefox >= 3.6, any other modern browser */
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Monoid";
  src: url("../fonts/monoid/Monoid-Regular-NoCalt.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Monoid";
  src: url("../fonts/monoid/Monoid-Italic-NoCalt.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Monoid";
  src: url("../fonts/monoid/Monoid-Bold-NoCalt.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Fantasque Sans Mono";
  src: url("../fonts/fantasque/FantasqueSansMono-Bold.woff2") format("woff2"), url("../fonts/fantasque/FantasqueSansMono-Bold.woff") format("woff");
  /* Firefox >= 3.6, any other modern browser */
  font-weight: 700;
  font-style: normal;
  size-adjust: 100%;
}
@font-face {
  font-family: "Fantasque Sans Mono";
  src: url("../fonts/fantasque/FantasqueSansMono-BoldItalic.woff2") format("woff2"), url("../fonts/fantasque/FantasqueSansMono-BoldItalic.woff") format("woff");
  /* Firefox >= 3.6, any other modern browser */
  font-weight: 700;
  font-style: italic;
  size-adjust: 100%;
}
@font-face {
  font-family: "Fantasque Sans Mono";
  src: url("../fonts/fantasque/FantasqueSansMono-Italic.woff2") format("woff2"), url("../fonts/fantasque/FantasqueSansMono-Italic.woff") format("woff");
  /* Firefox >= 3.6, any other modern browser */
  font-weight: 400;
  font-style: italic;
  size-adjust: 100%;
}
@font-face {
  font-family: "Fantasque Sans Mono";
  src: url("../fonts/fantasque/FantasqueSansMono-Regular.woff2") format("woff2"), url("../fonts/fantasque/FantasqueSansMono-Regular.woff") format("woff");
  /* Firefox >= 3.6, any other modern browser */
  font-weight: 400;
  font-style: normal;
  size-adjust: 100%;
}
:root {
  --resizer-bg: rgb(232.0935483871, 224.4580645161, 199.0064516129);
  --resizer-bg-hover: rgb(239.6, 140.9, 98.9);
  --error-fg: var(--color-3);
  --warn-fg: var(--color-2);
  --frame-text: #333;
  --frame-text-faded: #666;
  --frame-border-focused: rgb(237.4, 205.4, 76.6);
  --frame-header: rgb(247.8, 245.4, 237.4);
  --frame-header-focused: rgb(241.8, 217.8, 121.2);
  --frame-tab: rgb(232.0935483871, 224.4580645161, 199.0064516129);
  --frame-tab-selected: rgb(246.9, 244.2, 235.2);
  --frame-tab-focused: rgb(237.4, 205.4, 76.6);
  --frame-tab-focused-selected: rgb(246.2, 230.2, 165.8);
}

:root {
  --color-1: #E95C20;
  --color-1-dark: rgb(96.4816326531, 35.4775510204, 9.5183673469);
  --color-1-light: rgb(241.8, 157.2, 121.2);
  --color-1-light-desat: rgb(217.68, 166.92, 145.32);
  --color-2: #E9C120;
  --color-2-light: rgb(241.8, 217.8, 121.2);
  --color-2-light-desat: rgb(217.68, 203.28, 145.32);
  --color-2-desat: rgb(192.8, 168.8, 72.2);
  --color-2-dark: rgb(217.0836734694, 178.1448979592, 21.4163265306);
  --color-3: #cf3c3a;
  --color-3-light: rgb(226.2, 138, 136.8);
  --color-3-light-desat: rgb(208.32, 155.4, 154.68);
  --color-4: #5cc920;
  --color-4-light: rgb(177.8433476395, 237.4892703863, 145.0107296137);
  --color-5: #205cc9;
  --color-5-light: rgb(145.0107296137, 177.8433476395, 237.4892703863);
  --text-fg: #001;
  --text-bg: rgb(250.4204081633, 242.093877551, 208.5795918367);
  --text-bg-2: rgb(252.7102040816, 248.5469387755, 231.7897959184);
  --text-bg-2-border: rgb(243.5510204082, 222.7346938776, 138.9489795918);
  --text-fg-reverse: var(--text-bg);
  --text-bg-reverse: var(--text-fg);
  --text-fg-link: hsl(240, 100%, 30%);
  --text-fg-link-hover: hsl(0, 100%, 30%);
  --text-fg-visited: hsl(240, 100%, 30%);
  --text-fg-link-reverse: hsl(240, 100%, 80%);
  --text-fg-link-hover-reverse: hsl(0, 100%, 80%);
  --text-fg-visited-reverse: hsl(240, 100%, 80%);
  --side-bg: rgb(232.7, 236.7, 252.8);
  --side-bg-reverse: rgb(2.3795918367, 6.706122449, 24.1204081633);
}

pre {
  line-height: 125%;
}

td.linenos .normal {
  color: inherit;
  background-color: transparent;
  padding-left: 5px;
  padding-right: 5px;
}

span.linenos {
  color: inherit;
  background-color: transparent;
  padding-left: 5px;
  padding-right: 5px;
}

td.linenos .special {
  color: #000000;
  background-color: #ffffc0;
  padding-left: 5px;
  padding-right: 5px;
}

span.linenos.special {
  color: #000000;
  background-color: #ffffc0;
  padding-left: 5px;
  padding-right: 5px;
}

.codehilite .hll {
  background-color: #ffffcc;
}

.codehilite {
  background: #f8f8f8;
}

.codehilite .c {
  color: #3D7B7B;
  font-style: italic;
}

/* Comment */
.codehilite .err {
  border: 1px solid #F00;
}

/* Error */
.codehilite .k {
  color: #008000;
  font-weight: bold;
}

/* Keyword */
.codehilite .o {
  color: #666;
}

/* Operator */
.codehilite .ch {
  color: #3D7B7B;
  font-style: italic;
}

/* Comment.Hashbang */
.codehilite .cm {
  color: #3D7B7B;
  font-style: italic;
}

/* Comment.Multiline */
.codehilite .cp {
  color: #9C6500;
}

/* Comment.Preproc */
.codehilite .cpf {
  color: #3D7B7B;
  font-style: italic;
}

/* Comment.PreprocFile */
.codehilite .c1 {
  color: #3D7B7B;
  font-style: italic;
}

/* Comment.Single */
.codehilite .cs {
  color: #3D7B7B;
  font-style: italic;
}

/* Comment.Special */
.codehilite .gd {
  color: #A00000;
}

/* Generic.Deleted */
.codehilite .ge {
  font-style: italic;
}

/* Generic.Emph */
.codehilite .ges {
  font-weight: bold;
  font-style: italic;
}

/* Generic.EmphStrong */
.codehilite .gr {
  color: #E40000;
}

/* Generic.Error */
.codehilite .gh {
  color: #000080;
  font-weight: bold;
}

/* Generic.Heading */
.codehilite .gi {
  color: #008400;
}

/* Generic.Inserted */
.codehilite .go {
  color: #717171;
}

/* Generic.Output */
.codehilite .gp {
  color: #000080;
  font-weight: bold;
}

/* Generic.Prompt */
.codehilite .gs {
  font-weight: bold;
}

/* Generic.Strong */
.codehilite .gu {
  color: #800080;
  font-weight: bold;
}

/* Generic.Subheading */
.codehilite .gt {
  color: #04D;
}

/* Generic.Traceback */
.codehilite .kc {
  color: #008000;
  font-weight: bold;
}

/* Keyword.Constant */
.codehilite .kd {
  color: #008000;
  font-weight: bold;
}

/* Keyword.Declaration */
.codehilite .kn {
  color: #008000;
  font-weight: bold;
}

/* Keyword.Namespace */
.codehilite .kp {
  color: #008000;
}

/* Keyword.Pseudo */
.codehilite .kr {
  color: #008000;
  font-weight: bold;
}

/* Keyword.Reserved */
.codehilite .kt {
  color: #B00040;
}

/* Keyword.Type */
.codehilite .m {
  color: #666;
}

/* Literal.Number */
.codehilite .s {
  color: #BA2121;
}

/* Literal.String */
.codehilite .na {
  color: #687822;
}

/* Name.Attribute */
.codehilite .nb {
  color: #008000;
}

/* Name.Builtin */
.codehilite .nc {
  color: #00F;
  font-weight: bold;
}

/* Name.Class */
.codehilite .no {
  color: #800;
}

/* Name.Constant */
.codehilite .nd {
  color: #A2F;
}

/* Name.Decorator */
.codehilite .ni {
  color: #717171;
  font-weight: bold;
}

/* Name.Entity */
.codehilite .ne {
  color: #CB3F38;
  font-weight: bold;
}

/* Name.Exception */
.codehilite .nf {
  color: #00F;
}

/* Name.Function */
.codehilite .nl {
  color: #767600;
}

/* Name.Label */
.codehilite .nn {
  color: #00F;
  font-weight: bold;
}

/* Name.Namespace */
.codehilite .nt {
  color: #008000;
  font-weight: bold;
}

/* Name.Tag */
.codehilite .nv {
  color: #19177C;
}

/* Name.Variable */
.codehilite .ow {
  color: #A2F;
  font-weight: bold;
}

/* Operator.Word */
.codehilite .w {
  color: #BBB;
}

/* Text.Whitespace */
.codehilite .mb {
  color: #666;
}

/* Literal.Number.Bin */
.codehilite .mf {
  color: #666;
}

/* Literal.Number.Float */
.codehilite .mh {
  color: #666;
}

/* Literal.Number.Hex */
.codehilite .mi {
  color: #666;
}

/* Literal.Number.Integer */
.codehilite .mo {
  color: #666;
}

/* Literal.Number.Oct */
.codehilite .sa {
  color: #BA2121;
}

/* Literal.String.Affix */
.codehilite .sb {
  color: #BA2121;
}

/* Literal.String.Backtick */
.codehilite .sc {
  color: #BA2121;
}

/* Literal.String.Char */
.codehilite .dl {
  color: #BA2121;
}

/* Literal.String.Delimiter */
.codehilite .sd {
  color: #BA2121;
  font-style: italic;
}

/* Literal.String.Doc */
.codehilite .s2 {
  color: #BA2121;
}

/* Literal.String.Double */
.codehilite .se {
  color: #AA5D1F;
  font-weight: bold;
}

/* Literal.String.Escape */
.codehilite .sh {
  color: #BA2121;
}

/* Literal.String.Heredoc */
.codehilite .si {
  color: #A45A77;
  font-weight: bold;
}

/* Literal.String.Interpol */
.codehilite .sx {
  color: #008000;
}

/* Literal.String.Other */
.codehilite .sr {
  color: #A45A77;
}

/* Literal.String.Regex */
.codehilite .s1 {
  color: #BA2121;
}

/* Literal.String.Single */
.codehilite .ss {
  color: #19177C;
}

/* Literal.String.Symbol */
.codehilite .bp {
  color: #008000;
}

/* Name.Builtin.Pseudo */
.codehilite .fm {
  color: #00F;
}

/* Name.Function.Magic */
.codehilite .vc {
  color: #19177C;
}

/* Name.Variable.Class */
.codehilite .vg {
  color: #19177C;
}

/* Name.Variable.Global */
.codehilite .vi {
  color: #19177C;
}

/* Name.Variable.Instance */
.codehilite .vm {
  color: #19177C;
}

/* Name.Variable.Magic */
.codehilite .il {
  color: #666;
}

/* Literal.Number.Integer.Long */
@media (prefers-color-scheme: dark) {
  pre {
    line-height: 125%;
  }
  td.linenos .normal {
    color: inherit;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
  }
  span.linenos {
    color: inherit;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
  }
  td.linenos .special {
    color: #000000;
    background-color: #ffffc0;
    padding-left: 5px;
    padding-right: 5px;
  }
  span.linenos.special {
    color: #000000;
    background-color: #ffffc0;
    padding-left: 5px;
    padding-right: 5px;
  }
  .codehilite .hll {
    background-color: #49483e;
  }
  .codehilite {
    background: #272822;
    color: #F8F8F2;
  }
  .codehilite .c {
    color: #959077;
  }
  /* Comment */
  .codehilite .err {
    color: #ED007E;
    background-color: #1E0010;
  }
  /* Error */
  .codehilite .esc {
    color: #F8F8F2;
  }
  /* Escape */
  .codehilite .g {
    color: #F8F8F2;
  }
  /* Generic */
  .codehilite .k {
    color: #66D9EF;
  }
  /* Keyword */
  .codehilite .l {
    color: #AE81FF;
  }
  /* Literal */
  .codehilite .n {
    color: #F8F8F2;
  }
  /* Name */
  .codehilite .o {
    color: #FF4689;
  }
  /* Operator */
  .codehilite .x {
    color: #F8F8F2;
  }
  /* Other */
  .codehilite .p {
    color: #F8F8F2;
  }
  /* Punctuation */
  .codehilite .ch {
    color: #959077;
  }
  /* Comment.Hashbang */
  .codehilite .cm {
    color: #959077;
  }
  /* Comment.Multiline */
  .codehilite .cp {
    color: #959077;
  }
  /* Comment.Preproc */
  .codehilite .cpf {
    color: #959077;
  }
  /* Comment.PreprocFile */
  .codehilite .c1 {
    color: #959077;
  }
  /* Comment.Single */
  .codehilite .cs {
    color: #959077;
  }
  /* Comment.Special */
  .codehilite .gd {
    color: #FF4689;
  }
  /* Generic.Deleted */
  .codehilite .ge {
    color: #F8F8F2;
    font-style: italic;
  }
  /* Generic.Emph */
  .codehilite .ges {
    color: #F8F8F2;
    font-weight: bold;
    font-style: italic;
  }
  /* Generic.EmphStrong */
  .codehilite .gr {
    color: #F8F8F2;
  }
  /* Generic.Error */
  .codehilite .gh {
    color: #F8F8F2;
  }
  /* Generic.Heading */
  .codehilite .gi {
    color: #A6E22E;
  }
  /* Generic.Inserted */
  .codehilite .go {
    color: #66D9EF;
  }
  /* Generic.Output */
  .codehilite .gp {
    color: #FF4689;
    font-weight: bold;
  }
  /* Generic.Prompt */
  .codehilite .gs {
    color: #F8F8F2;
    font-weight: bold;
  }
  /* Generic.Strong */
  .codehilite .gu {
    color: #959077;
  }
  /* Generic.Subheading */
  .codehilite .gt {
    color: #F8F8F2;
  }
  /* Generic.Traceback */
  .codehilite .kc {
    color: #66D9EF;
  }
  /* Keyword.Constant */
  .codehilite .kd {
    color: #66D9EF;
  }
  /* Keyword.Declaration */
  .codehilite .kn {
    color: #FF4689;
  }
  /* Keyword.Namespace */
  .codehilite .kp {
    color: #66D9EF;
  }
  /* Keyword.Pseudo */
  .codehilite .kr {
    color: #66D9EF;
  }
  /* Keyword.Reserved */
  .codehilite .kt {
    color: #66D9EF;
  }
  /* Keyword.Type */
  .codehilite .ld {
    color: #E6DB74;
  }
  /* Literal.Date */
  .codehilite .m {
    color: #AE81FF;
  }
  /* Literal.Number */
  .codehilite .s {
    color: #E6DB74;
  }
  /* Literal.String */
  .codehilite .na {
    color: #A6E22E;
  }
  /* Name.Attribute */
  .codehilite .nb {
    color: #F8F8F2;
  }
  /* Name.Builtin */
  .codehilite .nc {
    color: #A6E22E;
  }
  /* Name.Class */
  .codehilite .no {
    color: #66D9EF;
  }
  /* Name.Constant */
  .codehilite .nd {
    color: #A6E22E;
  }
  /* Name.Decorator */
  .codehilite .ni {
    color: #F8F8F2;
  }
  /* Name.Entity */
  .codehilite .ne {
    color: #A6E22E;
  }
  /* Name.Exception */
  .codehilite .nf {
    color: #A6E22E;
  }
  /* Name.Function */
  .codehilite .nl {
    color: #F8F8F2;
  }
  /* Name.Label */
  .codehilite .nn {
    color: #F8F8F2;
  }
  /* Name.Namespace */
  .codehilite .nx {
    color: #A6E22E;
  }
  /* Name.Other */
  .codehilite .py {
    color: #F8F8F2;
  }
  /* Name.Property */
  .codehilite .nt {
    color: #FF4689;
  }
  /* Name.Tag */
  .codehilite .nv {
    color: #F8F8F2;
  }
  /* Name.Variable */
  .codehilite .ow {
    color: #FF4689;
  }
  /* Operator.Word */
  .codehilite .pm {
    color: #F8F8F2;
  }
  /* Punctuation.Marker */
  .codehilite .w {
    color: #F8F8F2;
  }
  /* Text.Whitespace */
  .codehilite .mb {
    color: #AE81FF;
  }
  /* Literal.Number.Bin */
  .codehilite .mf {
    color: #AE81FF;
  }
  /* Literal.Number.Float */
  .codehilite .mh {
    color: #AE81FF;
  }
  /* Literal.Number.Hex */
  .codehilite .mi {
    color: #AE81FF;
  }
  /* Literal.Number.Integer */
  .codehilite .mo {
    color: #AE81FF;
  }
  /* Literal.Number.Oct */
  .codehilite .sa {
    color: #E6DB74;
  }
  /* Literal.String.Affix */
  .codehilite .sb {
    color: #E6DB74;
  }
  /* Literal.String.Backtick */
  .codehilite .sc {
    color: #E6DB74;
  }
  /* Literal.String.Char */
  .codehilite .dl {
    color: #E6DB74;
  }
  /* Literal.String.Delimiter */
  .codehilite .sd {
    color: #E6DB74;
  }
  /* Literal.String.Doc */
  .codehilite .s2 {
    color: #E6DB74;
  }
  /* Literal.String.Double */
  .codehilite .se {
    color: #AE81FF;
  }
  /* Literal.String.Escape */
  .codehilite .sh {
    color: #E6DB74;
  }
  /* Literal.String.Heredoc */
  .codehilite .si {
    color: #E6DB74;
  }
  /* Literal.String.Interpol */
  .codehilite .sx {
    color: #E6DB74;
  }
  /* Literal.String.Other */
  .codehilite .sr {
    color: #E6DB74;
  }
  /* Literal.String.Regex */
  .codehilite .s1 {
    color: #E6DB74;
  }
  /* Literal.String.Single */
  .codehilite .ss {
    color: #E6DB74;
  }
  /* Literal.String.Symbol */
  .codehilite .bp {
    color: #F8F8F2;
  }
  /* Name.Builtin.Pseudo */
  .codehilite .fm {
    color: #A6E22E;
  }
  /* Name.Function.Magic */
  .codehilite .vc {
    color: #F8F8F2;
  }
  /* Name.Variable.Class */
  .codehilite .vg {
    color: #F8F8F2;
  }
  /* Name.Variable.Global */
  .codehilite .vi {
    color: #F8F8F2;
  }
  /* Name.Variable.Instance */
  .codehilite .vm {
    color: #F8F8F2;
  }
  /* Name.Variable.Magic */
  .codehilite .il {
    color: #AE81FF;
  }
  /* Literal.Number.Integer.Long */
  :root {
    --color-1: rgb(139.2612244898, 51.2081632653, 13.7387755102);
    --color-1-light: rgb(92.8408163265, 34.1387755102, 9.1591836735);
    --color-1-dark: rgb(245.8408163265, 187.1387755102, 162.1591836735);
    --color-2: rgb(139.2612244898, 114.2816326531, 13.7387755102);
    --color-2-light: rgb(69.6306122449, 57.1408163265, 6.8693877551);
    --color-2-light-desat: rgb(61.2, 52.0656716418, 15.3);
    --color-2-dark: rgb(245.8408163265, 229.187755102, 162.1591836735);
    --color-2-desat: rgb(122.4, 104.1313432836, 30.6);
    --color-3: rgb(123.0244897959, 31.2244897959, 29.9755102041);
    --color-3-light:rgb(82.0163265306, 20.8163265306, 19.9836734694);
    --color-3-light-desat: rgb(81.6, 21.2214765101, 20.4);
    --color-4: rgb(60.4120171674, 131.9871244635, 21.0128755365);
    --color-4-light: rgb(40.2746781116, 87.991416309, 14.008583691);
    --color-5: #205cc9;
    --color-5-light: rgb(14.008583691, 40.2746781116, 87.991416309);
    --text-fg: rgb(250.4204081633, 242.093877551, 208.5795918367);
    --text-bg: #001;
    --text-bg-2: rgb(3.6636734694, 10.3248979592, 37.1363265306);
    --text-bg-2-border: rgb(92.8408163265, 76.187755102, 9.1591836735);
    --text-fg-link: hsl(240, 100%, 90%);
    --text-fg-link-hover: hsl(0, 100%, 90%);
    --text-fg-visited: hsl(240, 100%, 90%);
    --text-fg-link-reverse: hsl(240, 100%, 30%);
    --text-fg-link-hover-reverse: hsl(0, 100%, 30%);
    --text-fg-visited-reverse: hsl(240, 100%, 30%);
    --side-bg: rgb(2.3795918367, 6.706122449, 24.1204081633);
    --side-bg-reverse: rgb(232.7, 236.7, 252.8);
  }
}
body {
  font-family: "Andika", serif;
  color: var(--text-fg);
  background-color: var(--text-bg);
  background-size: 100vw 100vh;
  background-attachment: fixed;
  background-blend-mode: screen;
}

textarea,
input {
  color: var(--text-fg);
  background-color: var(--text-bg-2);
  border-radius: 5px;
  border-color: var(--color-2-light);
}

.codehilite {
  padding: 0.125rem;
  border-radius: 5px;
  border: 1px solid #ccc;
  overflow-x: auto;
}
.codehilite pre {
  margin: 0.125rem;
}
.codehilite code,
.codehilite pre {
  background: transparent;
}

pre.codelines[data-digits="1"] > code.codeline::before {
  width: 1em;
}

pre.codelines[data-digits="2"] > code.codeline::before {
  width: 2em;
}

pre.codelines[data-digits="3"] > code.codeline::before {
  width: 3em;
}

pre.codelines[data-digits="4"] > code.codeline::before {
  width: 4em;
}

pre.codelines code.codeline {
  display: block;
}
pre.codelines code.codeline::before {
  content: attr(data-lineno);
  font-family: "Andika";
  color: var(--color-1-dark);
  display: inline-block;
  text-align: right;
  margin-right: 0.75rem;
  font-size: 8px;
  line-height: 1rem;
}
pre.codelines code.codeline:hover {
  background-color: rgba(136, 136, 136, 0.0666666667);
}

pre code {
  white-space: pre-wrap;
  word-wrap: break-word;
}

code,
pre,
kbd {
  font-family: "Fantasque Sans Mono", monospace;
  overflow-wrap: break-word;
}

kbd {
  border: 0.1em outset var(--text-fg);
  border-radius: 5px;
  padding: 0.1em;
}

#page.layout-plain {
  display: grid;
  grid-template-areas: ". toc . main . .";
  grid-template-columns: 1fr minmax(15rem, max-content) 1rem minmax(30rem, 60rem) 16rem 1fr;
}
#page.layout-plain main {
  margin-right: 16rem;
  width: 100%;
}
#page.layout-plain aside.sidebar {
  width: 15rem;
  margin-right: -16rem;
}
@media (width < 65rem) {
  #page.layout-plain {
    grid-template-areas: ". toc . main . . ";
    grid-template-columns: 0 minmax(10rem, 14rem) 0.25rem minmax(20rem, 40rem) 11rem 0;
  }
  #page.layout-plain main {
    margin-right: 11rem;
  }
  #page.layout-plain aside.sidebar {
    width: 10rem;
    margin-right: -11rem;
  }
  #page.layout-plain aside.toc {
    font-size: smaller;
  }
}
@media (width < 49rem) {
  #page.layout-plain {
    display: block;
  }
  #page.layout-plain main {
    margin-right: 0.5rem;
  }
  #page.layout-plain aside.sidebar {
    margin: 0.5rem;
    position: static;
    width: auto;
  }
}
#page.layout-plain {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}
#page.layout-plain > * {
  margin-block: 0.5rem;
}

aside.toc {
  grid-area: toc;
  position: sticky;
  top: 1rem;
  order: -1;
  max-width: 100%;
  text-align: left;
}
.notes aside.toc {
  max-width: 20rem;
}
@media (width < 65rem) {
  .notes aside.toc {
    max-width: 12rem;
  }
}
.notes aside.toc {
  top: 1rem;
  bottom: 1rem;
  font-size: smaller;
}
.notes aside.toc nav {
  margin-top: 0.25rem;
}
.notes aside.toc nav h2 {
  font-size: 14px;
}
.notes aside.toc nav ul[data-level="2"] {
  font-size: 14px;
  list-style-type: "· ";
  list-style-position: inside;
}
.notes aside.toc nav ul[data-level="2"] a {
  display: inline;
}
.notes aside.toc nav ul[data-level="3"] {
  font-size: 12px;
  list-style-type: "– ";
  list-style-position: inside;
  margin-left: 0.5rem;
}
.notes aside.toc nav ul[data-level="3"] a {
  display: inline;
}
aside.toc > * {
  font-size: inherit;
}
aside.toc nav {
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  border-radius: 5px;
  border: 1px solid var(--text-bg-2-border);
  margin-top: 3rem;
  padding: 0.25rem;
  text-indent: 1.25em hanging;
}
aside.toc nav a {
  text-decoration: none;
  display: block;
}
aside.toc nav a:hover {
  text-decoration: underline;
}
aside.toc nav h2 {
  font-size: larger;
  margin: 0.25rem 0 0.15rem;
  font-variant: small-caps;
}
aside.toc nav .icon {
  font-style: normal;
}
aside.toc nav ul[data-level="2"] {
  padding-right: 0;
  list-style: none;
  font-style: normal;
  margin: 0;
}
aside.toc nav ul {
  font-weight: normal;
  padding: 0;
  list-style-type: none;
  font-style: italic;
}
aside.toc nav li:hover {
  background-color: var(--text-bg-2-border);
}
aside.toc nav {
  /*
          &>ul {
              padding-right: 0;

              &>li>details {
                  &>summary {
                      list-style: none;
                  }

                  &>ul {
                      padding-right: 0rem;
                  }
              }
          }

          details {
              direction: rtl;
              width: 100%;
              padding-right: 0rem;
          }

          summary {
              list-style-position: outside !important;
          }

          summary::marker {
              text-align: start;
              ;
          }
  */
}

aside.sidebar {
  float: right;
  background-color: var(--side-bg);
  border-radius: 5px;
  border: 1px solid var(--text-bg-2-border);
  width: 15rem;
  margin: 2rem -16rem 2rem 1rem;
  padding: 0.25rem;
}
aside.sidebar pre {
  max-width: 20rem;
  max-height: 50vh;
  overflow-y: scroll;
  white-space: pre-wrap;
}

main {
  grid-area: main;
  margin: 0.5rem auto;
  max-width: 100%;
}

a:link.external,
a:link[target=_blank] {
  position: relative;
}

:any-link,
a:link {
  color: var(--text-fg-link);
  text-decoration: underline;
}

:any-link:hover,
summary:hover {
  color: var(--text-fg-link-hover);
  cursor: grab;
}

a.external,
a[target=_blank],
a[download] {
  color: var(--text-fg-link);
}

:visited,
a:visited.external a[target=_blank]:visited,
a[download]:visited {
  color: var(--text-fg-visited);
}

/*
a:link.external::after,
a:link[target="_blank"]::after {
    background-image: url(../img/arrow-up-right-square.svg);
    background-size: 50%;
    background-repeat: no-repeat;
    content: "  ";
    width: 1em;
    height: 1em;
    position: absolute;
}
*/
input:invalid {
  border-color: var(--error-fg);
}

a.button:any-link {
  text-decoration: none;
}

button.big-button,
a.big-button,
.big-button {
  height: 2.5rem;
  padding: 3px 6px;
  margin: 0.25rem;
  text-align: center;
  min-width: 5rem;
}

button,
a.button {
  color: var(--text-fg);
  border: 0.125rem outset var(--color-2);
  border-radius: 0.25rem;
  background-color: var(--color-2-light);
}
.buttons button,
.buttons a.button {
  border: 0.125rem outset var(--color-2);
  border-radius: 0.25rem;
}
button:disabled,
a.button:disabled {
  border-style: solid;
  background-color: var(--color-2-light-desat);
  border-color: var(--color-2-desat);
}

button:hover:not(:disabled),
button:active:not(:disabled),
a.button:hover,
a.button:active {
  border-color: var(--color-1);
  background-color: var(--color-1-light);
  border-style: outset;
}

button:hover:disabled {
  border-color: var(--color-2-light-desat);
}

button:active:not(:disabled) {
  border-style: inset;
}

button.running {
  border-style: solid !important;
  border-color: var(--color-1-light);
  cursor: wait;
}

label {
  justify-self: end;
}

#mid {
  display: grid;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: auto;
  padding: 1rem 0.5rem;
}

h1 {
  font-variant: small-caps;
  font-weight: normal;
  margin-block-start: 0.75rem;
}

meter {
  width: 100%;
  height: 1.5rem;
  border-radius: 0.25rem;
  overflow: clip;
}

meter::-webkit-meter-bar {
  height: 1.25rem;
  background-color: whitesmoke;
  background-image: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
  border-radius: 0.25rem;
}

meter::-webkit-meter-optimum-value {
  background-image: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}

meter::-webkit-meter-suboptimum-value {
  background-image: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}

meter::-webkit-meter-even-less-good-value {
  background-image: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}

header {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  background: var(--color-3);
  min-height: 2.25rem;
  color: #fff;
}
header div {
  padding: 0.05rem 0.25rem;
}
header #page-home {
  text-align: left;
  min-width: 25%;
  flex-grow: 1;
}
header #page-home a {
  color: inherit !important;
  text-decoration: none !important;
}
header #page-home .logo {
  font-variant: small-caps;
  margin-right: 2rem;
  background: transparent;
}
header #page-home {
  display: flex;
  flex-direction: row;
  justify-content: normal;
  align-items: center;
}
header h1 {
  margin: 0;
  text-align: center;
  min-width: 33%;
}
header #user-info {
  flex-grow: 1;
  text-align: right;
  min-width: 25%;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
}
header #user-info * {
  vertical-align: middle;
}
header #user-info .is-admin::before {
  content: "👩‍💻";
}
header #user-info .name[title=teacher]::after {
  content: " 🧑‍🏫";
}
header #user-info .account-status {
  display: none;
}
header #user-info .account-status > [data-account] {
  display: inline;
}
header #user-info .account-status > [data-account][data-is-active]::before {
  content: attr(data-account-short);
}
header #user-info .account-status:hover > [data-account] {
  display: block;
}
header #user-info .account-status:hover > [data-account]::before {
  content: "❌";
}
header #user-info .account-status:hover > [data-account][data-is-active]::before {
  content: "✔️";
}
header #user-info .account-status:hover > [data-account]::after {
  content: attr(data-account-name);
}

.flashes {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 999;
  right: 0%;
  margin: 1rem;
  margin-top: 3.5rem;
  padding: 0.25rem;
  overflow: clip;
  opacity: 100%;
}
.flashes#flash-log {
  opacity: 10%;
}
.flashes .flash {
  margin: 0.25rem;
  transform-origin: top;
  transition-duration: 2s;
  transition-delay: 0s;
  transition-timing-function: ease-in;
  transition-property: all;
}
@media (prefers-reduced-motion) {
  .flashes .flash {
    transition-duration: 0s;
  }
}
.flashes .flash {
  display: flow-root;
  overflow: hidden;
  position: relative;
  min-width: 10em;
  max-height: fit-content;
  /* TODO: needed? */
  width: auto;
  color: #111;
  padding: 0.5rem;
  padding-top: 0.5rem;
  padding-left: 0.5rem;
  background: var(--text-bg);
  box-shadow: var(--text-bg) 0px 0px 5px;
  border-radius: 0.5rem;
  right: 0%;
}
.flashes .flash[data-stage=fade] {
  opacity: 75%;
}
.flashes .flash[data-stage=keep], .flashes .flash[data-stage=show] {
  opacity: 100%;
  right: 0%;
}
.flashes .flash .flash-inner {
  position: relative;
  transition: 1s all;
  background: white;
  border: 0.25rem solid white;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.flashes .flash button {
  position: absolute;
  top: -0.75rem;
  left: -0.75rem;
  border: 3px solid black;
  border-radius: 100%;
  font-size: 1rem;
}
.flashes .flash.info .flash-inner, .flashes .flash.info button {
  background-color: rgb(242.25, 242.25, 255);
  border-color: rgb(25.5, 25.5, 255);
}
.flashes .flash.message .flash-inner, .flashes .flash.message button {
  background-color: rgb(235.9, 255, 235.9);
  border-color: rgb(0, 166.2, 0);
}
.flashes .flash.warning .flash-inner,
.flashes .flash.warning button {
  background-color: rgb(255, 250.5, 242.25);
  border-color: rgb(255, 174, 25.5);
}
.flashes .flash.warning .flash-inner {
  border-style: dotted;
}
.flashes .flash.error .flash-inner,
.flashes .flash.error button {
  background-color: rgb(255, 242.25, 242.25);
  border-color: rgb(255, 25.5, 25.5);
}
.flashes .flash.error .flash-inner {
  border-style: dashed;
}
.flashes .flash[data-stage=hide] {
  opacity: 0%;
  z-index: 998;
}
.flashes .flash[data-stage=remove] {
  opacity: 0%;
  z-index: 998;
  right: 100%;
  max-height: 0px !important;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}
.flashes .flash[data-stage=removed] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .flashes .flash[data-stage=hide], .flashes .flash[data-stage=remove] {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
  }
  .flashes .flash[data-stage=hide]:not(:last-child), .flashes .flash[data-stage=remove]:not(:last-child) {
    max-height: 0px !important;
  }
  .flashes .flash[data-stage=hide], .flashes .flash[data-stage=remove] {
    right: -100%;
  }
}

.flashes.left {
  left: 0%;
}
.flashes.left .flash {
  left: 0%;
}
.flashes.left .flash.remove {
  left: -100%;
}

.two-column {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: 2rem;
  width: 100%;
  flex-wrap: wrap;
}
.two-column div {
  max-width: max(40em, 650px);
  min-width: 15em;
  flex-shrink: 1;
}

.source-display {
  position: relative;
}

.source-display button {
  position: absolute;
  right: 0;
}

div.stack-frames {
  padding: 0;
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
  border-bottom: 0.125rem solid;
}
div.stack-frames h1 {
  padding: 0.5rem;
  font-size: 1.4rem;
  font-weight: bold;
}

.stack-frame h2 {
  margin: 0;
  padding: 0.5rem;
  background-color: var(--color-2-light);
  color: var(--text-fg);
}
.stack-frame .memory {
  display: grid;
  grid-template-columns: repeat(8, 2rem) minmax(max-content, 1fr) repeat(4, auto);
  grid-template-rows: repeat(auto-fit, 2rem);
  line-height: 2rem;
  margin-left: 2.5rem;
  margin-bottom: 1rem;
  width: max-content;
}
.stack-frame .memory .head {
  font-weight: 500;
}
.stack-frame .memory .offset,
.stack-frame .memory .size {
  text-align: right;
}
.stack-frame .memory .name,
.stack-frame .memory .type,
.stack-frame .memory .kind {
  text-align: left;
}
.stack-frame .memory .offset,
.stack-frame .memory .name,
.stack-frame .memory .type,
.stack-frame .memory .size,
.stack-frame .memory .kind {
  height: 2rem;
  padding: 0 0.25rem;
}
.stack-frame .memory .offset {
  margin-left: 2rem;
}
.stack-frame .memory .offset .hex {
  display: inline;
}
.stack-frame .memory .offset .dec {
  display: none;
}
.stack-frame .memory .byte {
  height: 2rem;
  border: none;
  position: relative;
  display: block;
  padding: 0.1rem;
  --grid-color: #fff8;
  --grid-pos1: 2%;
  --grid-pos2: 98%;
}
@media (prefers-color-scheme: dark) {
  .stack-frame .memory .byte {
    --grid-color: #0008;
  }
}
.stack-frame .memory .byte.bg-p, .stack-frame .memory .byte.bg-0, .stack-frame .memory .byte.bg-1, .stack-frame .memory .byte.bg-2, .stack-frame .memory .byte.bg-3, .stack-frame .memory .byte.bg-4, .stack-frame .memory .byte.bg-5 {
  background-image: linear-gradient(90deg, var(--grid-color) 0%, var(--grid-color) var(--grid-pos1), rgba(0, 0, 0, 0) var(--grid-pos1), rgba(0, 0, 0, 0) var(--grid-pos2), var(--grid-color) var(--grid-pos2), var(--grid-color) 100%), linear-gradient(0deg, var(--grid-color) 0%, var(--grid-color) var(--grid-pos1), rgba(0, 0, 0, 0) var(--grid-pos1), rgba(0, 0, 0, 0) var(--grid-pos2), var(--grid-color) var(--grid-pos2), var(--grid-color) 100%);
  background-size: 2rem 2rem;
}
.stack-frame .memory .byte::before,
.stack-frame .memory .byte::after {
  position: absolute;
  line-height: normal;
  color: var(--color-1-dark);
  text-shadow: none;
  font-size: 0.8rem;
}
.stack-frame .memory .byte[data-last-pos="7"]::after,
.stack-frame .memory .byte[data-start]::before {
  font-size: 0.5rem;
}
.stack-frame .memory .byte[data-last-pos="7"]::after {
  content: attr(data-last-offset);
  right: 0.25rem;
}
.stack-frame .memory .byte[data-start]::before {
  left: 0.25rem;
}
.stack-frame .memory .byte[data-start]::before,
.stack-frame .memory .byte[data-pos="0"]::before,
.stack-frame .memory .prev-frame[data-offset]::before,
.stack-frame .memory .next-frame[data-offset]::before {
  content: attr(data-offset);
}
.stack-frame .memory .byte[data-pos="0"]::before,
.stack-frame .memory .prev-frame[data-offset]::before,
.stack-frame .memory .next-frame[data-offset]::before {
  left: -0.25rem;
  transform: translateX(-100%);
}
.stack-frame .memory .prev-frame,
.stack-frame .memory .next-frame {
  position: relative;
  text-align: center;
  height: 120%;
}
.stack-frame .memory .prev-frame {
  clip-path: polygon(-100% 0%, 100% 0%, 100% 100%, 100% 65%, 97% 70%, 92% 67%, 86% 93%, 78% 65%, 75% 94%, 72% 63%, 66% 93%, 63% 60%, 60% 99%, 54% 79%, 47% 81%, 42% 73%, 36% 88%, 29% 69%, 25% 95%, 21% 60%, 16% 94%, 8% 66%, 2% 98%, 0% 100%, -100% 100%);
}
.stack-frame .memory .next-frame {
  clip-path: polygon(-100% 100%, 100% 100%, 100% 0%, 100% 35%, 97% 30%, 92% 33%, 86% 7%, 78% 35%, 75% 6%, 72% 37%, 66% 7%, 63% 40%, 60% 1%, 54% 21%, 47% 19%, 42% 27%, 36% 12%, 29% 31%, 25% 5%, 21% 40%, 16% 6%, 8% 34%, 2% 2%, 0% 0%, -100% 0%);
}
.stack-frame .memory span.hex {
  display: none;
}
@media (prefers-color-scheme: dark) {
  .stack-frame {
    --stack-bg-light: 25%;
    --stack-bg-sat: 60%;
  }
}
@media (prefers-color-scheme: light) {
  .stack-frame {
    --stack-bg-light: 75%;
    --stack-bg-sat: 75% ;
  }
}
.stack-frame .bg-p {
  text-shadow: 0.1rem 0.1rem 5px var(--text-bg);
  background-color: hsl(0, 0%, var(--stack-bg-light));
}
.stack-frame .bg-0 {
  background-color: hsl(300, var(--stack-bg-sat), var(--stack-bg-light));
}
.stack-frame .bg-2 {
  background-color: hsl(240, var(--stack-bg-sat), var(--stack-bg-light));
}
.stack-frame .bg-4 {
  background-color: hsl(180, var(--stack-bg-sat), var(--stack-bg-light));
}
.stack-frame .bg-1 {
  background-color: hsl(120, var(--stack-bg-sat), var(--stack-bg-light));
}
.stack-frame .bg-5 {
  background-color: hsl(60, var(--stack-bg-sat), var(--stack-bg-light));
}
.stack-frame .bg-3 {
  background-color: hsl(0, var(--stack-bg-sat), var(--stack-bg-light));
}
.stack-frame td,
.stack-frame th {
  padding: 0.25rem;
  border: 1px solid;
}

.hex .byte[data-start]::before,
.hex .byte[data-pos="0"]::before,
.hex .prev-frame[data-offset]::before,
.hex .next-frame[data-offset]::before {
  content: attr(data-offset-x) !important;
}
.hex .byte[data-last-pos="7"]::after {
  content: attr(data-last-offset-x) !important;
}

.stack-frames .hex .memory .byte[data-pos="0"]::before,
.stack-frames.hex .memory .byte[data-pos="0"]::before,
.stack-frames .hex.memory .byte[data-pos="0"]::before {
  content: attr(data-offset-x);
}

.stack-frames .hex .memory .byte[data-pos="0"]::before,
.stack-frames.hex .memory .byte[data-pos="0"]::before,
.stack-frames .hex.memory .byte[data-pos="0"]::before {
  content: attr(data-offset-x);
}
.stack-frames .hex .memory span.hex,
.stack-frames.hex .memory span.hex,
.stack-frames .hex.memory span.hex {
  display: inline;
}
.stack-frames .hex .memory span.dec,
.stack-frames.hex .memory span.dec,
.stack-frames .hex.memory span.dec {
  display: none;
}

* {
  box-sizing: border-box;
}

.bg-49 {
  background-color: inherit;
}

.fg-30 {
  color: var(--text-fg);
}

.fg-30 {
  color: #000;
}

.fg-31 {
  color: #800;
}

.fg-32 {
  color: #060;
}

.fg-33 {
  color: #840;
}

.fg-34 {
  color: #00a;
}

.fg-35 {
  color: #808;
}

.fg-36 {
  color: #068;
}

.fg-37 {
  color: #888;
}

.fg-39 {
  color: var(--text-fg);
}

.bold {
  font-weight: bold;
}

@media (prefers-color-scheme: dark) {
  .fg-30 {
    color: #000;
  }
  .fg-31 {
    color: #f00;
  }
  .fg-32 {
    color: #0c0;
  }
  .fg-33 {
    color: #f80;
  }
  .fg-34 {
    color: #00f;
  }
  .fg-35 {
    color: #f0f;
  }
  .fg-36 {
    color: #0dd;
  }
  .fg-37 {
    color: #ccc;
  }
}
label {
  justify-self: end;
}

pre code {
  background-color: transparent;
  text-shadow: none;
}

code {
  background-color: transparent;
}

details h2 {
  display: inline;
}

nav.toc {
  background-color: var(--text-bg-2);
}
nav.toc h2 {
  margin: 0.25rem 0;
}
nav.toc li.task-0 a::before, nav.toc li.task-1 a::before, nav.toc li.task-2 a::before, nav.toc li.task-3 a::before, nav.toc li.task-4 a::before {
  content: "👉 ";
  font-style: normal;
  font-size: smaller;
}
nav.toc .icon {
  font-size: smaller;
}
body[data-task-0=success] nav.toc li.task-0 a::before, body[data-task-1=success] nav.toc li.task-1 a::before, body[data-task-2=success] nav.toc li.task-2 a::before, body[data-task-3=success] nav.toc li.task-3 a::before, body[data-task-4=success] nav.toc li.task-4 a::before {
  content: "✅ ";
}
body[data-task-0=failure] nav.toc li.task-0 a::before, body[data-task-1=failure] nav.toc li.task-1 a::before, body[data-task-2=failure] nav.toc li.task-2 a::before, body[data-task-3=failure] nav.toc li.task-3 a::before, body[data-task-4=failure] nav.toc li.task-4 a::before, body[data-task-0=in_progress] nav.toc li.task-0 a::before, body[data-task-1=in_progress] nav.toc li.task-1 a::before, body[data-task-2=in_progress] nav.toc li.task-2 a::before, body[data-task-3=in_progress] nav.toc li.task-3 a::before, body[data-task-4=in_progress] nav.toc li.task-4 a::before {
  content: "✍️ ";
}
body[data-task-0=incomplete] nav.toc li.task-0 a::before, body[data-task-1=incomplete] nav.toc li.task-1 a::before, body[data-task-2=incomplete] nav.toc li.task-2 a::before, body[data-task-3=incomplete] nav.toc li.task-3 a::before, body[data-task-4=incomplete] nav.toc li.task-4 a::before {
  content: "👉 ";
}
body[data-task-0=invalid] nav.toc li.task-0 a::before, body[data-task-1=invalid] nav.toc li.task-1 a::before, body[data-task-2=invalid] nav.toc li.task-2 a::before, body[data-task-3=invalid] nav.toc li.task-3 a::before, body[data-task-4=invalid] nav.toc li.task-4 a::before {
  content: "‼️ ";
}

div.stack-display {
  width: 100%;
}

section.task,
section.section {
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid var(--text-bg-2-border);
  background: var(--text-bg-2);
  border-radius: 5px;
  position: relative;
}
section.task h3,
section.section h3 {
  margin-top: 0;
}
section.task aside,
section.section aside {
  float: right;
  background-color: var(--side-bg);
  border-radius: 5px;
  border: 1px solid var(--text-bg-2-border);
  width: 15rem;
  margin: 2rem -16rem 2rem 1rem;
  padding: 0.25rem;
}
section.task aside h3,
section.section aside h3 {
  font-size: smaller;
  text-align: center;
  position: relative;
}
section.task aside h3::before,
section.section aside h3::before {
  content: "👀 ";
  position: absolute;
  left: 0.25rem;
}
section.task aside h3.task-success::before,
section.section aside h3.task-success::before {
  content: "✅ ";
  position: absolute;
  left: 0.25rem;
}
section.task aside,
section.section aside {
  position: sticky;
  top: 3rem;
  bottom: 3rem;
}
body[data-task-0=success] section.task[name=Task-0]::before, body[data-task-1=success] section.task[name=Task-1]::before, body[data-task-2=success] section.task[name=Task-2]::before, body[data-task-3=success] section.task[name=Task-3]::before, body[data-task-4=success] section.task[name=Task-4]::before,
body[data-task-0=success] section.section[name=Task-0]::before,
body[data-task-1=success] section.section[name=Task-1]::before,
body[data-task-2=success] section.section[name=Task-2]::before,
body[data-task-3=success] section.section[name=Task-3]::before,
body[data-task-4=success] section.section[name=Task-4]::before {
  content: "✅ " attr(name);
}
body[data-task-0=success] section.task[name=Task-0]::before, body[data-task-1=success] section.task[name=Task-1]::before, body[data-task-2=success] section.task[name=Task-2]::before, body[data-task-3=success] section.task[name=Task-3]::before, body[data-task-4=success] section.task[name=Task-4]::before,
body[data-task-0=success] section.section[name=Task-0]::before,
body[data-task-1=success] section.section[name=Task-1]::before,
body[data-task-2=success] section.section[name=Task-2]::before,
body[data-task-3=success] section.section[name=Task-3]::before,
body[data-task-4=success] section.section[name=Task-4]::before {
  content: "❌ " attr(name);
}

#submit-success-button {
  min-width: 10rem;
}

#success-token-result {
  font-style: italic;
}

ul.progress {
  display: grid;
  gap: 1rem;
  padding: 0;
  margin: 0.5rem 0;
  grid-auto-flow: row;
  grid-template-rows: 1fr;
  grid-auto-columns: minmax(0, 1fr);
}
ul.progress li a:any-link {
  color: var(--text-fg);
  text-decoration: none;
}
ul.progress li {
  font-variant: small-caps;
  grid-row: 1;
  display: block;
  text-align: center;
  border: 0.25rem ridge;
  border-radius: 0.25rem;
}

.big-button {
  transition: background-color 4s, border-color 4s;
}

.success,
ul.progress li.success {
  border-color: var(--color-4);
  background-color: var(--color-4-light);
}

.incomplete,
ul.progress li.incomplete {
  border-color: var(--color-2-desat);
  background-color: var(--color-2-light-desat);
  transition: background-color 0s, border-color 0s;
}

.in_progress,
ul.progress li.in_progress {
  border-color: var(--color-5);
  background-color: var(--color-5-light);
  transition: background-color 0s, border-color 0s;
}

.failure,
ul.progress li.failure {
  border-color: var(--color-2);
  background-color: var(--color-2-light);
  transition: background-color 0s, border-color 0s;
}

.invalid,
ul.progress li.invalid,
.error {
  border-color: var(--color-3);
  background-color: var(--color-3-light);
  transition: background-color 0s, border-color 0s;
}

.display-code textarea, .display-code .for-edit {
  display: none;
}

.edit-code .source-display, .edit-code label.for-display {
  display: none;
}

#options {
  font-size: smaller;
}

#page.layout-compile {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
  gap: 1rem;
}
#page.layout-compile main {
  padding-left: 14rem;
  max-width: 60rem;
  min-width: 30rem;
  flex-grow: 1;
  flex-shrink: 2;
}
#page.layout-compile.layout-wide main {
  max-width: unset;
  min-width: min-content;
}
#page.layout-compile aside.stack-display {
  flex-shrink: 1;
  min-width: min-content;
  min-height: 20rem;
  overflow-x: auto;
}
#page.layout-compile aside.sidebar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 13.5rem;
  margin-left: -14rem;
  position: sticky;
  top: 3rem;
  bottom: 3rem;
  float: left;
}
#page.layout-compile aside.sidebar summary {
  margin-left: 1rem;
}
@media (width < 100rem) {
  #page.layout-compile main {
    padding-left: 0.25rem;
    max-width: 40rem;
  }
  #page.layout-compile aside.sidebar {
    float: none;
    position: static;
    margin: 0.25rem;
    width: auto;
    font-size: smaller;
  }
  #page.layout-compile aside.toc {
    font-size: smaller;
  }
}
@media (width < 60rem) {
  #page.layout-compile {
    flex-wrap: wrap;
  }
  #page.layout-compile main {
    padding-left: 0.5rem;
  }
  #page.layout-compile aside.sidebar {
    float: none;
    margin: 0.5rem;
  }
}
#page.layout-compile > * {
  margin-block: 0.5rem;
}

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