Docs

16 files changed, 3673 insertions, 0 deletions

diff --git a/assets/.DS_Store b/assets/.DS_Store
new file mode 100644
index 0000000..4ee3c15
--- /dev/null
+++ b/assets/.DS_Store
diff --git a/assets/css/chroma/dark.css b/assets/css/chroma/dark.css
new file mode 100644
index 0000000..8f662bd
--- /dev/null
+++ b/assets/css/chroma/dark.css
@@ -0,0 +1,89 @@
+.dark .highlight {
+  /* Background .bg { color: #c9d1d9; background-color: #0d1117; }
+  /* PreWrapper .chroma { color: #c9d1d9; background-color: #0d1117; } */
+  /* Other */ .chroma .x {  }
+  /* Error */ .chroma .err { color: #f85149 }
+  /* CodeLine */ .chroma .cl {  }
+  /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+  /* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */
+  /* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */
+  /* LineHighlight .chroma .hl { background-color: #ffffcc } */
+  /* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c } */
+  /* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 } */
+  /* Line */ .chroma .line { display: flex; }
+  /* Keyword */ .chroma .k { color: #ff7b72 }
+  /* KeywordConstant */ .chroma .kc { color: #79c0ff }
+  /* KeywordDeclaration */ .chroma .kd { color: #ff7b72 }
+  /* KeywordNamespace */ .chroma .kn { color: #ff7b72 }
+  /* KeywordPseudo */ .chroma .kp { color: #79c0ff }
+  /* KeywordReserved */ .chroma .kr { color: #ff7b72 }
+  /* KeywordType */ .chroma .kt { color: #ff7b72 }
+  /* Name */ .chroma .n {  }
+  /* NameAttribute */ .chroma .na {  }
+  /* NameBuiltin */ .chroma .nb {  }
+  /* NameBuiltinPseudo */ .chroma .bp {  }
+  /* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
+  /* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
+  /* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold }
+  /* NameEntity */ .chroma .ni { color: #ffa657 }
+  /* NameException */ .chroma .ne { color: #f0883e; font-weight: bold }
+  /* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold }
+  /* NameFunctionMagic */ .chroma .fm {  }
+  /* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold }
+  /* NameNamespace */ .chroma .nn { color: #ff7b72 }
+  /* NameOther */ .chroma .nx {  }
+  /* NameProperty */ .chroma .py { color: #79c0ff }
+  /* NameTag */ .chroma .nt { color: #7ee787 }
+  /* NameVariable */ .chroma .nv { color: #79c0ff }
+  /* NameVariableClass */ .chroma .vc {  }
+  /* NameVariableGlobal */ .chroma .vg {  }
+  /* NameVariableInstance */ .chroma .vi {  }
+  /* NameVariableMagic */ .chroma .vm {  }
+  /* Literal */ .chroma .l { color: #a5d6ff }
+  /* LiteralDate */ .chroma .ld { color: #79c0ff }
+  /* LiteralString */ .chroma .s { color: #a5d6ff }
+  /* LiteralStringAffix */ .chroma .sa { color: #79c0ff }
+  /* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff }
+  /* LiteralStringChar */ .chroma .sc { color: #a5d6ff }
+  /* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff }
+  /* LiteralStringDoc */ .chroma .sd { color: #a5d6ff }
+  /* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff }
+  /* LiteralStringEscape */ .chroma .se { color: #79c0ff }
+  /* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff }
+  /* LiteralStringInterpol */ .chroma .si { color: #a5d6ff }
+  /* LiteralStringOther */ .chroma .sx { color: #a5d6ff }
+  /* LiteralStringRegex */ .chroma .sr { color: #79c0ff }
+  /* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff }
+  /* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff }
+  /* LiteralNumber */ .chroma .m { color: #a5d6ff }
+  /* LiteralNumberBin */ .chroma .mb { color: #a5d6ff }
+  /* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff }
+  /* LiteralNumberHex */ .chroma .mh { color: #a5d6ff }
+  /* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff }
+  /* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff }
+  /* LiteralNumberOct */ .chroma .mo { color: #a5d6ff }
+  /* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
+  /* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
+  /* Punctuation */ .chroma .p {  }
+  /* Comment */ .chroma .c { color: #8b949e; font-style: italic }
+  /* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic }
+  /* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic }
+  /* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic }
+  /* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
+  /* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
+  /* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
+  /* Generic */ .chroma .g {  }
+  /* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
+  /* GenericEmph */ .chroma .ge { font-style: italic }
+  /* GenericError */ .chroma .gr { color: #ffa198 }
+  /* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
+  /* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
+  /* GenericOutput */ .chroma .go { color: #8b949e }
+  /* GenericPrompt */ .chroma .gp { color: #8b949e }
+  /* GenericStrong */ .chroma .gs { font-weight: bold }
+  /* GenericSubheading */ .chroma .gu { color: #79c0ff }
+  /* GenericTraceback */ .chroma .gt { color: #ff7b72 }
+  /* GenericUnderline */ .chroma .gl { text-decoration: underline }
+  /* TextWhitespace */ .chroma .w { color: #6e7681 }
+}
+
diff --git a/assets/css/chroma/light.css b/assets/css/chroma/light.css
new file mode 100644
index 0000000..20990c7
--- /dev/null
+++ b/assets/css/chroma/light.css
@@ -0,0 +1,90 @@
+/* Light theme for syntax highlight */
+/* Generated using `hugo gen chromastyles --style=github` */
+.highlight {
+  /* Background  .bg { background-color: #ffffff; } */
+  /* PreWrapper  .chroma { background-color: #ffffff; } */
+  /* Other .chroma .x {  } */
+  /* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
+  /* CodeLine .chroma .cl {  } */
+  /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+  /* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */
+  /* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */
+  /* LineHighlight .chroma .hl { background-color: #ffffcc } */
+  /* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */
+  /* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */
+  /* Line */ .chroma .line { display: flex; }
+  /* Keyword */ .chroma .k { color: #000000; font-weight: bold }
+  /* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }
+  /* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold }
+  /* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold }
+  /* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold }
+  /* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold }
+  /* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
+  /* Name .chroma .n {  } */
+  /* NameAttribute */ .chroma .na { color: #008080 }
+  /* NameBuiltin */ .chroma .nb { color: #0086b3 }
+  /* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
+  /* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
+  /* NameConstant */ .chroma .no { color: #008080 }
+  /* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
+  /* NameEntity */ .chroma .ni { color: #800080 }
+  /* NameException */ .chroma .ne { color: #990000; font-weight: bold }
+  /* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
+  /* NameFunctionMagic .chroma .fm {  } */
+  /* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
+  /* NameNamespace */ .chroma .nn { color: #555555 }
+  /* NameOther .chroma .nx {  } */
+  /* NameProperty .chroma .py {  } */
+  /* NameTag */ .chroma .nt { color: #000080 }
+  /* NameVariable */ .chroma .nv { color: #008080 }
+  /* NameVariableClass */ .chroma .vc { color: #008080 }
+  /* NameVariableGlobal */ .chroma .vg { color: #008080 }
+  /* NameVariableInstance */ .chroma .vi { color: #008080 }
+  /* NameVariableMagic .chroma .vm {  } */
+  /* Literal .chroma .l {  } */
+  /* LiteralDate .chroma .ld {  } */
+  /* LiteralString */ .chroma .s { color: #dd1144 }
+  /* LiteralStringAffix */ .chroma .sa { color: #dd1144 }
+  /* LiteralStringBacktick */ .chroma .sb { color: #dd1144 }
+  /* LiteralStringChar */ .chroma .sc { color: #dd1144 }
+  /* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 }
+  /* LiteralStringDoc */ .chroma .sd { color: #dd1144 }
+  /* LiteralStringDouble */ .chroma .s2 { color: #dd1144 }
+  /* LiteralStringEscape */ .chroma .se { color: #dd1144 }
+  /* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 }
+  /* LiteralStringInterpol */ .chroma .si { color: #dd1144 }
+  /* LiteralStringOther */ .chroma .sx { color: #dd1144 }
+  /* LiteralStringRegex */ .chroma .sr { color: #009926 }
+  /* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
+  /* LiteralStringSymbol */ .chroma .ss { color: #990073 }
+  /* LiteralNumber */ .chroma .m { color: #009999 }
+  /* LiteralNumberBin */ .chroma .mb { color: #009999 }
+  /* LiteralNumberFloat */ .chroma .mf { color: #009999 }
+  /* LiteralNumberHex */ .chroma .mh { color: #009999 }
+  /* LiteralNumberInteger */ .chroma .mi { color: #009999 }
+  /* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
+  /* LiteralNumberOct */ .chroma .mo { color: #009999 }
+  /* Operator */ .chroma .o { color: #000000; font-weight: bold }
+  /* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
+  /* Punctuation .chroma .p {  } */
+  /* Comment */ .chroma .c { color: #999988; font-style: italic }
+  /* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
+  /* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
+  /* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
+  /* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
+  /* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
+  /* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
+  /* Generic .chroma .g {  } */
+  /* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
+  /* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
+  /* GenericError */ .chroma .gr { color: #aa0000 }
+  /* GenericHeading */ .chroma .gh { color: #999999 }
+  /* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
+  /* GenericOutput */ .chroma .go { color: #888888 }
+  /* GenericPrompt */ .chroma .gp { color: #555555 }
+  /* GenericStrong */ .chroma .gs { font-weight: bold }
+  /* GenericSubheading */ .chroma .gu { color: #aaaaaa }
+  /* GenericTraceback */ .chroma .gt { color: #aa0000 }
+  /* GenericUnderline */ .chroma .gl { text-decoration: underline }
+  /* TextWhitespace */ .chroma .w { color: #bbbbbb }
+}
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
new file mode 100644
index 0000000..6a7cfe5
--- /dev/null
+++ b/assets/css/compiled/main.css
@@ -0,0 +1,3097 @@
+/*
+! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
+*//*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: #e5e7eb; /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+*/
+
+html {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+.pointer-events-none {
+  pointer-events: none;
+}
+.visible {
+  visibility: visible;
+}
+.fixed {
+  position: fixed;
+}
+.absolute {
+  position: absolute;
+}
+.relative {
+  position: relative;
+}
+.sticky {
+  position: sticky;
+}
+.inset-0 {
+  inset: 0px;
+}
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+.bottom-0 {
+  bottom: 0px;
+}
+.right-0 {
+  right: 0px;
+}
+.top-0 {
+  top: 0px;
+}
+.top-16 {
+  top: 4rem;
+}
+.top-8 {
+  top: 2rem;
+}
+.top-full {
+  top: 100%;
+}
+.z-10 {
+  z-index: 10;
+}
+.z-20 {
+  z-index: 20;
+}
+.z-\[-1\] {
+  z-index: -1;
+}
+.order-last {
+  order: 9999;
+}
+.m-\[11px\] {
+  margin: 11px;
+}
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.my-1\.5 {
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+.my-16 {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.my-24 {
+  margin-top: 6rem;
+  margin-bottom: 6rem;
+}
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+.-ml-2 {
+  margin-left: -0.5rem;
+}
+.-mr-2 {
+  margin-right: -0.5rem;
+}
+.-mt-20 {
+  margin-top: -5rem;
+}
+.mb-12 {
+  margin-bottom: 3rem;
+}
+.mb-16 {
+  margin-bottom: 4rem;
+}
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+.mb-4 {
+  margin-bottom: 1rem;
+}
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+.mb-8 {
+  margin-bottom: 2rem;
+}
+.ml-1 {
+  margin-left: 0.25rem;
+}
+.ml-3 {
+  margin-left: 0.75rem;
+}
+.mr-5 {
+  margin-right: 1.25rem;
+}
+.mt-1 {
+  margin-top: 0.25rem;
+}
+.mt-1\.5 {
+  margin-top: 0.375rem;
+}
+.mt-12 {
+  margin-top: 3rem;
+}
+.mt-16 {
+  margin-top: 4rem;
+}
+.mt-2 {
+  margin-top: 0.5rem;
+}
+.mt-3 {
+  margin-top: 0.75rem;
+}
+.mt-4 {
+  margin-top: 1rem;
+}
+.mt-6 {
+  margin-top: 1.5rem;
+}
+.mt-8 {
+  margin-top: 2rem;
+}
+.block {
+  display: block;
+}
+.inline-block {
+  display: inline-block;
+}
+.inline {
+  display: inline;
+}
+.flex {
+  display: flex;
+}
+.grid {
+  display: grid;
+}
+.hidden {
+  display: none;
+}
+.h-10 {
+  height: 2.5rem;
+}
+.h-16 {
+  height: 4rem;
+}
+.h-3 {
+  height: 0.75rem;
+}
+.h-3\.5 {
+  height: 0.875rem;
+}
+.h-4 {
+  height: 1rem;
+}
+.h-5 {
+  height: 1.25rem;
+}
+.h-7 {
+  height: 1.75rem;
+}
+.h-\[18px\] {
+  height: 18px;
+}
+.h-full {
+  height: 100%;
+}
+.max-h-\[calc\(100vh-var\(--navbar-height\)-env\(safe-area-inset-bottom\)\)\] {
+  max-height: calc(100vh - var(--navbar-height) - env(safe-area-inset-bottom));
+}
+.max-h-\[min\(calc\(50vh-11rem-env\(safe-area-inset-bottom\)\)\2c 400px\)\] {
+  max-height: min(calc(50vh - 11rem - env(safe-area-inset-bottom)),400px);
+}
+.min-h-\[100px\] {
+  min-height: 100px;
+}
+.min-h-\[calc\(100vh-var\(--navbar-height\)\)\] {
+  min-height: calc(100vh - var(--navbar-height));
+}
+.w-3 {
+  width: 0.75rem;
+}
+.w-3\.5 {
+  width: 0.875rem;
+}
+.w-4 {
+  width: 1rem;
+}
+.w-64 {
+  width: 16rem;
+}
+.w-full {
+  width: 100%;
+}
+.w-screen {
+  width: 100vw;
+}
+.min-w-0 {
+  min-width: 0px;
+}
+.min-w-\[18px\] {
+  min-width: 18px;
+}
+.min-w-\[24px\] {
+  min-width: 24px;
+}
+.max-w-2xl {
+  max-width: 42rem;
+}
+.max-w-4xl {
+  max-width: 56rem;
+}
+.max-w-6xl {
+  max-width: 72rem;
+}
+.max-w-\[50\%\] {
+  max-width: 50%;
+}
+.max-w-\[90rem\] {
+  max-width: 90rem;
+}
+.max-w-\[min\(calc\(100vw-2rem\)\2c calc\(100\%\+20rem\)\)\] {
+  max-width: min(calc(100vw - 2rem),calc(100% + 20rem));
+}
+.max-w-full {
+  max-width: 100%;
+}
+.max-w-lg {
+  max-width: 32rem;
+}
+.max-w-screen-xl {
+  max-width: 1280px;
+}
+.shrink-0 {
+  flex-shrink: 0;
+}
+.grow {
+  flex-grow: 1;
+}
+.origin-center {
+  transform-origin: center;
+}
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.scroll-my-6 {
+  scroll-margin-top: 1.5rem;
+  scroll-margin-bottom: 1.5rem;
+}
+.scroll-py-6 {
+  scroll-padding-top: 1.5rem;
+  scroll-padding-bottom: 1.5rem;
+}
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-start {
+  align-items: flex-start;
+}
+.items-center {
+  align-items: center;
+}
+.justify-start {
+  justify-content: flex-start;
+}
+.justify-end {
+  justify-content: flex-end;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.gap-1 {
+  gap: 0.25rem;
+}
+.gap-12 {
+  gap: 3rem;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+.gap-4 {
+  gap: 1rem;
+}
+.gap-8 {
+  gap: 2rem;
+}
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+.overflow-auto {
+  overflow: auto;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.overflow-y-auto {
+  overflow-y: auto;
+}
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+.overscroll-contain {
+  overscroll-behavior: contain;
+}
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+.break-words {
+  overflow-wrap: break-word;
+}
+.rounded {
+  border-radius: 0.25rem;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+.rounded-md {
+  border-radius: 0.375rem;
+}
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+.border {
+  border-width: 1px;
+}
+.border-2 {
+  border-width: 2px;
+}
+.border-t {
+  border-top-width: 1px;
+}
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+.border-black\/5 {
+  border-color: rgb(0 0 0 / 0.05);
+}
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+.bg-black\/80 {
+  background-color: rgb(0 0 0 / 0.8);
+}
+.bg-black\/\[\.05\] {
+  background-color: rgb(0 0 0 / .05);
+}
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+.bg-primary-100 {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / var(--tw-bg-opacity));
+}
+.bg-primary-700\/5 {
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
+}
+.bg-transparent {
+  background-color: transparent;
+}
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.p-0 {
+  padding: 0px;
+}
+.p-0\.5 {
+  padding: 0.125rem;
+}
+.p-1 {
+  padding: 0.25rem;
+}
+.p-1\.5 {
+  padding: 0.375rem;
+}
+.p-2 {
+  padding: 0.5rem;
+}
+.p-3 {
+  padding: 0.75rem;
+}
+.p-4 {
+  padding: 1rem;
+}
+.p-6 {
+  padding: 1.5rem;
+}
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+.pb-8 {
+  padding-bottom: 2rem;
+}
+.pl-\[max\(env\(safe-area-inset-left\)\2c 1\.5rem\)\] {
+  padding-left: max(env(safe-area-inset-left),1.5rem);
+}
+.pr-4 {
+  padding-right: 1rem;
+}
+.pr-\[calc\(env\(safe-area-inset-right\)-1\.5rem\)\] {
+  padding-right: calc(env(safe-area-inset-right) - 1.5rem);
+}
+.pr-\[max\(env\(safe-area-inset-left\)\2c 1\.5rem\)\] {
+  padding-right: max(env(safe-area-inset-left),1.5rem);
+}
+.pt-4 {
+  padding-top: 1rem;
+}
+.pt-6 {
+  padding-top: 1.5rem;
+}
+.pt-8 {
+  padding-top: 2rem;
+}
+.text-left {
+  text-align: left;
+}
+.text-center {
+  text-align: center;
+}
+.align-text-bottom {
+  vertical-align: text-bottom;
+}
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+.text-4xl {
+  font-size: 2.25rem;
+}
+.text-\[10px\] {
+  font-size: 10px;
+}
+.text-\[3rem\] {
+  font-size: 3rem;
+}
+.text-base {
+  font-size: 1rem;
+}
+.text-lg {
+  font-size: 1.125rem;
+}
+.text-sm {
+  font-size: .875rem;
+}
+.text-xl {
+  font-size: 1.25rem;
+}
+.text-xs {
+  font-size: .75rem;
+}
+.font-bold {
+  font-weight: 700;
+}
+.font-extrabold {
+  font-weight: 800;
+}
+.font-medium {
+  font-weight: 500;
+}
+.font-semibold {
+  font-weight: 600;
+}
+.capitalize {
+  text-transform: capitalize;
+}
+.leading-none {
+  line-height: 1;
+}
+.leading-relaxed {
+  line-height: 1.625;
+}
+.leading-tight {
+  line-height: 1.25;
+}
+.tracking-tight {
+  letter-spacing: -0.015em;
+}
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+.text-current {
+  color: currentColor;
+}
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+.text-primary-800 {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-text-opacity));
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.underline {
+  text-decoration-line: underline;
+}
+.no-underline {
+  text-decoration-line: none;
+}
+.opacity-0 {
+  opacity: 0;
+}
+.shadow-\[0_-12px_16px_\#fff\] {
+  --tw-shadow: 0 -12px 16px #fff;
+  --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.shadow-\[0_-12px_16px_white\] {
+  --tw-shadow: 0 -12px 16px white;
+  --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.shadow-\[0_2px_4px_rgba\(0\2c 0\2c 0\2c \.02\)\2c 0_1px_0_rgba\(0\2c 0\2c 0\2c \.06\)\] {
+  --tw-shadow: 0 2px 4px rgba(0,0,0,.02),0 1px 0 rgba(0,0,0,.06);
+  --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color), 0 1px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.shadow-gray-100 {
+  --tw-shadow-color: #f3f4f6;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.duration-200 {
+  transition-duration: 200ms;
+}
+.duration-75 {
+  transition-duration: 75ms;
+}
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+.\[-webkit-tap-highlight-color\:transparent\] {
+  -webkit-tap-highlight-color: transparent;
+}
+.\[-webkit-touch-callout\:none\] {
+  -webkit-touch-callout: none;
+}
+.\[hyphens\:auto\] {
+  -webkit-hyphens: auto;
+          hyphens: auto;
+}
+.\[transition\:background-color_1\.5s_ease\] {
+  transition: background-color 1.5s ease;
+}
+.\[word-break\:break-word\] {
+  word-break: break-word;
+}
+.content :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  margin-top: 0.5rem;
+  font-size: 2.25rem;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .content :where(h1):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+.content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  margin-top: 2.5rem;
+  border-bottom-width: 1px;
+  border-color: rgb(229 229 229 / 0.7);
+  padding-bottom: 0.25rem;
+  font-size: 1.875rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity));
+}
+@media (prefers-contrast: more) {
+
+  .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    --tw-border-opacity: 1;
+    border-color: rgb(163 163 163 / var(--tw-border-opacity));
+  }
+}
+:is(html[class~="dark"] .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.1);
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+@media (prefers-contrast: more) {
+
+  :is(html[class~="dark"] .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *))) {
+    --tw-border-opacity: 1;
+    border-color: rgb(163 163 163 / var(--tw-border-opacity));
+  }
+}
+.content :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  margin-top: 2rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .content :where(h3):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+.content :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  margin-top: 2rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .content :where(h4):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+.content :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  margin-top: 2rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .content :where(h5):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+.content :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  margin-top: 2rem;
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .content :where(h6):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+.content :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  margin-top: 1.5rem;
+  line-height: 1.75rem;
+}
+.content :where(p):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
+  margin-top: 0px;
+}
+.content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
+  text-decoration-line: underline;
+  text-decoration-thickness: from-font;
+  text-underline-position: from-font;
+}
+.content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  margin-top: 1.5rem;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  font-style: italic;
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+.content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
+  margin-top: 0px;
+}
+:is([dir="ltr"] .content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  border-left-width: 2px;
+  padding-left: 1.5rem;
+}
+:is([dir="rtl"] .content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  border-right-width: 2px;
+  padding-right: 1.5rem;
+}
+:is(html[class~="dark"] .content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+.content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
+  margin-bottom: 1rem;
+  overflow-x: auto;
+  border-radius: 0.75rem;
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  font-size: .9em;
+  font-weight: 500;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+@media (prefers-contrast: more) {
+
+  .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
+    border-width: 1px;
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
+    --tw-contrast: contrast(1.5);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  }
+}
+:is(html[class~="dark"] .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
+}
+@media (prefers-contrast: more) {
+
+  :is(html[class~="dark"] .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
+  }
+}
+.content :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
+  overflow-wrap: break-word;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  --tw-border-opacity: 0.04;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.03;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  padding-left: .25em;
+  padding-right: .25em;
+  font-size: .9em;
+}
+:is(html[class~="dark"] .content :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *))) {
+  border-color: rgb(255 255 255 / 0.1);
+  background-color: rgb(255 255 255 / 0.1);
+}
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
+  margin-top: 1.5rem;
+  display: block;
+  overflow-x: auto;
+  padding: 0px;
+}
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)):first-child {
+  margin-top: 0px;
+}
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr {
+  margin: 0px;
+  border-top-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  padding: 0px;
+}
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr) {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr):nth-child(even) {
+  background-color: rgb(75 85 99 / 0.2);
+}
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) th {
+  margin: 0px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-weight: 600;
+}
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) th) {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) td {
+  margin: 0px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) td) {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+.content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  margin-top: 1.5rem;
+  list-style-type: decimal;
+}
+.content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
+  margin-top: 0px;
+}
+:is([dir="ltr"] .content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  margin-left: 1.5rem;
+}
+:is([dir="rtl"] .content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  margin-right: 1.5rem;
+}
+.content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) li {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  margin-top: 1.5rem;
+  list-style-type: disc;
+}
+.content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
+  margin-top: 0px;
+}
+:is([dir="ltr"] .content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  margin-left: 1.5rem;
+}
+:is([dir="rtl"] .content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  margin-right: 1.5rem;
+}
+.content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) li {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.content :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  overflow-wrap: break-word;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  --tw-border-opacity: 0.04;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.03;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  padding-left: .25em;
+  padding-right: .25em;
+  font-size: .9em;
+}
+:is(html[class~="dark"] .content :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *))) {
+  border-color: rgb(255 255 255 / 0.1);
+  background-color: rgb(255 255 255 / 0.1);
+}
+.content :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
+  border-radius: 0px;
+  background-color: transparent;
+}
+:is(html[class~="dark"] .content :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
+  background-color: transparent;
+}
+.content :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 0.375rem;
+}
+.content :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) figcaption {
+  margin-top: 0.5rem;
+  display: block;
+  text-align: center;
+  font-size: .875rem;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .content :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) figcaption) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+.content .footnotes {
+  margin-top: 3rem;
+  font-size: .875rem;
+}
+.subheading-anchor {
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+:is([dir="ltr"] .subheading-anchor) {
+  margin-left: 0.25rem;
+}
+:is([dir="rtl"] .subheading-anchor) {
+  margin-right: 0.25rem;
+}
+span:target + .subheading-anchor,
+  :hover > .subheading-anchor,
+  .subheading-anchor:focus {
+  opacity: 1;
+}
+span + .subheading-anchor,
+  :hover > .subheading-anchor {
+  text-decoration-line: none !important;
+}
+.subheading-anchor:after {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  --tw-content: '#';
+  content: var(--tw-content);
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .subheading-anchor):after {
+  --tw-text-opacity: 1;
+  color: rgb(64 64 64 / var(--tw-text-opacity));
+}
+span:target + .subheading-anchor:after {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] span:target + .subheading-anchor):after {
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity));
+}
+article details > summary::-webkit-details-marker {
+  display: none;
+}
+article details > summary::before {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
+    height: 1.2em;
+    width: 1.2em;
+    vertical-align: -4px;
+  }
+/* Code syntax highlight */
+/* Light theme for syntax highlight */
+/* Generated using `hugo gen chromastyles --style=github` */
+.highlight {
+  /* Background  .bg { background-color: #ffffff; } */
+  /* PreWrapper  .chroma { background-color: #ffffff; } */
+  /* Other .chroma .x {  } */
+  /* CodeLine .chroma .cl {  } */
+  /* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */
+  /* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */
+  /* LineHighlight .chroma .hl { background-color: #ffffcc } */
+  /* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */
+  /* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */
+  /* Name .chroma .n {  } */
+  /* NameFunctionMagic .chroma .fm {  } */
+  /* NameOther .chroma .nx {  } */
+  /* NameProperty .chroma .py {  } */
+  /* NameVariableMagic .chroma .vm {  } */
+  /* Literal .chroma .l {  } */
+  /* LiteralDate .chroma .ld {  } */
+  /* Punctuation .chroma .p {  } */
+  /* Generic .chroma .g {  } */
+}
+/* Error */
+.highlight .chroma .err { color: #a61717; background-color: #e3d2d2 }
+/* LineLink */
+.highlight .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+/* Line */
+.highlight .chroma .line { display: flex; }
+/* Keyword */
+.highlight .chroma .k { color: #000000; font-weight: bold }
+/* KeywordConstant */
+.highlight .chroma .kc { color: #000000; font-weight: bold }
+/* KeywordDeclaration */
+.highlight .chroma .kd { color: #000000; font-weight: bold }
+/* KeywordNamespace */
+.highlight .chroma .kn { color: #000000; font-weight: bold }
+/* KeywordPseudo */
+.highlight .chroma .kp { color: #000000; font-weight: bold }
+/* KeywordReserved */
+.highlight .chroma .kr { color: #000000; font-weight: bold }
+/* KeywordType */
+.highlight .chroma .kt { color: #445588; font-weight: bold }
+/* NameAttribute */
+.highlight .chroma .na { color: #008080 }
+/* NameBuiltin */
+.highlight .chroma .nb { color: #0086b3 }
+/* NameBuiltinPseudo */
+.highlight .chroma .bp { color: #999999 }
+/* NameClass */
+.highlight .chroma .nc { color: #445588; font-weight: bold }
+/* NameConstant */
+.highlight .chroma .no { color: #008080 }
+/* NameDecorator */
+.highlight .chroma .nd { color: #3c5d5d; font-weight: bold }
+/* NameEntity */
+.highlight .chroma .ni { color: #800080 }
+/* NameException */
+.highlight .chroma .ne { color: #990000; font-weight: bold }
+/* NameFunction */
+.highlight .chroma .nf { color: #990000; font-weight: bold }
+/* NameLabel */
+.highlight .chroma .nl { color: #990000; font-weight: bold }
+/* NameNamespace */
+.highlight .chroma .nn { color: #555555 }
+/* NameTag */
+.highlight .chroma .nt { color: #000080 }
+/* NameVariable */
+.highlight .chroma .nv { color: #008080 }
+/* NameVariableClass */
+.highlight .chroma .vc { color: #008080 }
+/* NameVariableGlobal */
+.highlight .chroma .vg { color: #008080 }
+/* NameVariableInstance */
+.highlight .chroma .vi { color: #008080 }
+/* LiteralString */
+.highlight .chroma .s { color: #dd1144 }
+/* LiteralStringAffix */
+.highlight .chroma .sa { color: #dd1144 }
+/* LiteralStringBacktick */
+.highlight .chroma .sb { color: #dd1144 }
+/* LiteralStringChar */
+.highlight .chroma .sc { color: #dd1144 }
+/* LiteralStringDelimiter */
+.highlight .chroma .dl { color: #dd1144 }
+/* LiteralStringDoc */
+.highlight .chroma .sd { color: #dd1144 }
+/* LiteralStringDouble */
+.highlight .chroma .s2 { color: #dd1144 }
+/* LiteralStringEscape */
+.highlight .chroma .se { color: #dd1144 }
+/* LiteralStringHeredoc */
+.highlight .chroma .sh { color: #dd1144 }
+/* LiteralStringInterpol */
+.highlight .chroma .si { color: #dd1144 }
+/* LiteralStringOther */
+.highlight .chroma .sx { color: #dd1144 }
+/* LiteralStringRegex */
+.highlight .chroma .sr { color: #009926 }
+/* LiteralStringSingle */
+.highlight .chroma .s1 { color: #dd1144 }
+/* LiteralStringSymbol */
+.highlight .chroma .ss { color: #990073 }
+/* LiteralNumber */
+.highlight .chroma .m { color: #009999 }
+/* LiteralNumberBin */
+.highlight .chroma .mb { color: #009999 }
+/* LiteralNumberFloat */
+.highlight .chroma .mf { color: #009999 }
+/* LiteralNumberHex */
+.highlight .chroma .mh { color: #009999 }
+/* LiteralNumberInteger */
+.highlight .chroma .mi { color: #009999 }
+/* LiteralNumberIntegerLong */
+.highlight .chroma .il { color: #009999 }
+/* LiteralNumberOct */
+.highlight .chroma .mo { color: #009999 }
+/* Operator */
+.highlight .chroma .o { color: #000000; font-weight: bold }
+/* OperatorWord */
+.highlight .chroma .ow { color: #000000; font-weight: bold }
+/* Comment */
+.highlight .chroma .c { color: #999988; font-style: italic }
+/* CommentHashbang */
+.highlight .chroma .ch { color: #999988; font-style: italic }
+/* CommentMultiline */
+.highlight .chroma .cm { color: #999988; font-style: italic }
+/* CommentSingle */
+.highlight .chroma .c1 { color: #999988; font-style: italic }
+/* CommentSpecial */
+.highlight .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreproc */
+.highlight .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */
+.highlight .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
+/* GenericDeleted */
+.highlight .chroma .gd { color: #000000; background-color: #ffdddd }
+/* GenericEmph */
+.highlight .chroma .ge { color: #000000; font-style: italic }
+/* GenericError */
+.highlight .chroma .gr { color: #aa0000 }
+/* GenericHeading */
+.highlight .chroma .gh { color: #999999 }
+/* GenericInserted */
+.highlight .chroma .gi { color: #000000; background-color: #ddffdd }
+/* GenericOutput */
+.highlight .chroma .go { color: #888888 }
+/* GenericPrompt */
+.highlight .chroma .gp { color: #555555 }
+/* GenericStrong */
+.highlight .chroma .gs { font-weight: bold }
+/* GenericSubheading */
+.highlight .chroma .gu { color: #aaaaaa }
+/* GenericTraceback */
+.highlight .chroma .gt { color: #aa0000 }
+/* GenericUnderline */
+.highlight .chroma .gl { text-decoration: underline }
+/* TextWhitespace */
+.highlight .chroma .w { color: #bbbbbb }
+.dark .highlight {
+  /* Background .bg { color: #c9d1d9; background-color: #0d1117; }
+  /* PreWrapper .chroma { color: #c9d1d9; background-color: #0d1117; } */
+  /* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */
+  /* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */
+  /* LineHighlight .chroma .hl { background-color: #ffffcc } */
+  /* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c } */
+  /* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 } */
+}
+/* Other */
+.dark .highlight .chroma .x {  }
+/* Error */
+.dark .highlight .chroma .err { color: #f85149 }
+/* CodeLine */
+.dark .highlight .chroma .cl {  }
+/* LineLink */
+.dark .highlight .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+/* Line */
+.dark .highlight .chroma .line { display: flex; }
+/* Keyword */
+.dark .highlight .chroma .k { color: #ff7b72 }
+/* KeywordConstant */
+.dark .highlight .chroma .kc { color: #79c0ff }
+/* KeywordDeclaration */
+.dark .highlight .chroma .kd { color: #ff7b72 }
+/* KeywordNamespace */
+.dark .highlight .chroma .kn { color: #ff7b72 }
+/* KeywordPseudo */
+.dark .highlight .chroma .kp { color: #79c0ff }
+/* KeywordReserved */
+.dark .highlight .chroma .kr { color: #ff7b72 }
+/* KeywordType */
+.dark .highlight .chroma .kt { color: #ff7b72 }
+/* Name */
+.dark .highlight .chroma .n {  }
+/* NameAttribute */
+.dark .highlight .chroma .na {  }
+/* NameBuiltin */
+.dark .highlight .chroma .nb {  }
+/* NameBuiltinPseudo */
+.dark .highlight .chroma .bp {  }
+/* NameClass */
+.dark .highlight .chroma .nc { color: #f0883e; font-weight: bold }
+/* NameConstant */
+.dark .highlight .chroma .no { color: #79c0ff; font-weight: bold }
+/* NameDecorator */
+.dark .highlight .chroma .nd { color: #d2a8ff; font-weight: bold }
+/* NameEntity */
+.dark .highlight .chroma .ni { color: #ffa657 }
+/* NameException */
+.dark .highlight .chroma .ne { color: #f0883e; font-weight: bold }
+/* NameFunction */
+.dark .highlight .chroma .nf { color: #d2a8ff; font-weight: bold }
+/* NameFunctionMagic */
+.dark .highlight .chroma .fm {  }
+/* NameLabel */
+.dark .highlight .chroma .nl { color: #79c0ff; font-weight: bold }
+/* NameNamespace */
+.dark .highlight .chroma .nn { color: #ff7b72 }
+/* NameOther */
+.dark .highlight .chroma .nx {  }
+/* NameProperty */
+.dark .highlight .chroma .py { color: #79c0ff }
+/* NameTag */
+.dark .highlight .chroma .nt { color: #7ee787 }
+/* NameVariable */
+.dark .highlight .chroma .nv { color: #79c0ff }
+/* NameVariableClass */
+.dark .highlight .chroma .vc {  }
+/* NameVariableGlobal */
+.dark .highlight .chroma .vg {  }
+/* NameVariableInstance */
+.dark .highlight .chroma .vi {  }
+/* NameVariableMagic */
+.dark .highlight .chroma .vm {  }
+/* Literal */
+.dark .highlight .chroma .l { color: #a5d6ff }
+/* LiteralDate */
+.dark .highlight .chroma .ld { color: #79c0ff }
+/* LiteralString */
+.dark .highlight .chroma .s { color: #a5d6ff }
+/* LiteralStringAffix */
+.dark .highlight .chroma .sa { color: #79c0ff }
+/* LiteralStringBacktick */
+.dark .highlight .chroma .sb { color: #a5d6ff }
+/* LiteralStringChar */
+.dark .highlight .chroma .sc { color: #a5d6ff }
+/* LiteralStringDelimiter */
+.dark .highlight .chroma .dl { color: #79c0ff }
+/* LiteralStringDoc */
+.dark .highlight .chroma .sd { color: #a5d6ff }
+/* LiteralStringDouble */
+.dark .highlight .chroma .s2 { color: #a5d6ff }
+/* LiteralStringEscape */
+.dark .highlight .chroma .se { color: #79c0ff }
+/* LiteralStringHeredoc */
+.dark .highlight .chroma .sh { color: #79c0ff }
+/* LiteralStringInterpol */
+.dark .highlight .chroma .si { color: #a5d6ff }
+/* LiteralStringOther */
+.dark .highlight .chroma .sx { color: #a5d6ff }
+/* LiteralStringRegex */
+.dark .highlight .chroma .sr { color: #79c0ff }
+/* LiteralStringSingle */
+.dark .highlight .chroma .s1 { color: #a5d6ff }
+/* LiteralStringSymbol */
+.dark .highlight .chroma .ss { color: #a5d6ff }
+/* LiteralNumber */
+.dark .highlight .chroma .m { color: #a5d6ff }
+/* LiteralNumberBin */
+.dark .highlight .chroma .mb { color: #a5d6ff }
+/* LiteralNumberFloat */
+.dark .highlight .chroma .mf { color: #a5d6ff }
+/* LiteralNumberHex */
+.dark .highlight .chroma .mh { color: #a5d6ff }
+/* LiteralNumberInteger */
+.dark .highlight .chroma .mi { color: #a5d6ff }
+/* LiteralNumberIntegerLong */
+.dark .highlight .chroma .il { color: #a5d6ff }
+/* LiteralNumberOct */
+.dark .highlight .chroma .mo { color: #a5d6ff }
+/* Operator */
+.dark .highlight .chroma .o { color: #ff7b72; font-weight: bold }
+/* OperatorWord */
+.dark .highlight .chroma .ow { color: #ff7b72; font-weight: bold }
+/* Punctuation */
+.dark .highlight .chroma .p {  }
+/* Comment */
+.dark .highlight .chroma .c { color: #8b949e; font-style: italic }
+/* CommentHashbang */
+.dark .highlight .chroma .ch { color: #8b949e; font-style: italic }
+/* CommentMultiline */
+.dark .highlight .chroma .cm { color: #8b949e; font-style: italic }
+/* CommentSingle */
+.dark .highlight .chroma .c1 { color: #8b949e; font-style: italic }
+/* CommentSpecial */
+.dark .highlight .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
+/* CommentPreproc */
+.dark .highlight .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */
+.dark .highlight .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
+/* Generic */
+.dark .highlight .chroma .g {  }
+/* GenericDeleted */
+.dark .highlight .chroma .gd { color: #ffa198; background-color: #490202 }
+/* GenericEmph */
+.dark .highlight .chroma .ge { font-style: italic }
+/* GenericError */
+.dark .highlight .chroma .gr { color: #ffa198 }
+/* GenericHeading */
+.dark .highlight .chroma .gh { color: #79c0ff; font-weight: bold }
+/* GenericInserted */
+.dark .highlight .chroma .gi { color: #56d364; background-color: #0f5323 }
+/* GenericOutput */
+.dark .highlight .chroma .go { color: #8b949e }
+/* GenericPrompt */
+.dark .highlight .chroma .gp { color: #8b949e }
+/* GenericStrong */
+.dark .highlight .chroma .gs { font-weight: bold }
+/* GenericSubheading */
+.dark .highlight .chroma .gu { color: #79c0ff }
+/* GenericTraceback */
+.dark .highlight .chroma .gt { color: #ff7b72 }
+/* GenericUnderline */
+.dark .highlight .chroma .gl { text-decoration: underline }
+/* TextWhitespace */
+.dark .highlight .chroma .w { color: #6e7681 }
+.code-block {
+  font-size: .9em;
+  line-height: 1.25rem;
+}
+.code-block pre {
+  overflow-x: auto;
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
+  font-size: .9em;
+  font-weight: 500;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+@media (prefers-contrast: more) {
+
+  .code-block pre {
+    border-width: 1px;
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
+    --tw-contrast: contrast(1.5);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  }
+}
+:is(html[class~="dark"] .code-block pre) {
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
+}
+@media (prefers-contrast: more) {
+
+  :is(html[class~="dark"] .code-block pre) {
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
+  }
+}
+.code-block .filename {
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: .75rem;
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .code-block .filename) {
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+.code-block pre:not(.lntable pre) {
+  margin-bottom: 1rem;
+  border-radius: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.code-block div:nth-of-type(2) pre {
+  padding-top: 3rem;
+  padding-bottom: 1rem;
+}
+.chroma .lntable {
+  margin: 0px;
+  display: block;
+  width: auto;
+  overflow: auto;
+  border-radius: 0.75rem;
+}
+.chroma .lntable pre {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.chroma .ln,
+  .chroma .lnt:not(.hl > .lnt),
+  .chroma .hl:not(.line) {
+  min-width: 2.6rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(82 82 82 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .chroma .ln),:is(html[class~="dark"] 
+  .chroma .lnt:not(.hl > .lnt)),:is(html[class~="dark"] 
+  .chroma .hl:not(.line)) {
+  --tw-text-opacity: 1;
+  color: rgb(212 212 212 / var(--tw-text-opacity));
+}
+.chroma .lntd {
+  padding: 0px;
+  vertical-align: top;
+}
+.chroma .lntd:last-of-type {
+  width: 100%;
+}
+/* LineHighlight */
+.chroma .hl {
+  display: block;
+  width: 100%;
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / 0.1);
+}
+.hextra-cards {
+  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
+}
+.hextra-card img {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.hextra-card:hover svg {
+  color: currentColor;
+}
+.hextra-card svg {
+  width: 1.5rem;
+  color: #00000033;
+  transition: color 0.3s ease;
+}
+.hextra-card p {
+  margin-top: 0.5rem;
+}
+.dark .hextra-card svg {
+  color: #ffffff66;
+}
+.dark .hextra-card:hover svg {
+  color: currentColor;
+}
+.steps h3 {
+  counter-increment: step;
+}
+.steps h3:before {
+  position: absolute;
+  height: 33px;
+  width: 33px;
+  border-width: 4px;
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+:is(html[class~="dark"] .steps h3):before {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 17 17 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+.steps h3:before {
+  border-radius: 9999px;
+  text-align: center;
+  text-indent: -1px;
+  font-size: 1rem;
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity));
+  margin-top: 3px;
+  margin-left: -41px;
+    content: counter(step);
+}
+.search-wrapper li {
+  margin-left: 0.625rem;
+  margin-right: 0.625rem;
+  overflow-wrap: break-word;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+@media (prefers-contrast: more) {
+
+  .search-wrapper li {
+    border-width: 1px;
+    border-color: transparent;
+  }
+}
+:is(html[class~="dark"] .search-wrapper li) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+.search-wrapper li a {
+  display: block;
+  scroll-margin: 3rem;
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.search-wrapper li .title {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+}
+.search-wrapper li .active {
+  border-radius: 0.375rem;
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1);
+}
+@media (prefers-contrast: more) {
+
+  .search-wrapper li .active {
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
+  }
+}
+.search-wrapper .no-result {
+  display: block;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  padding: 2rem;
+  text-align: center;
+  font-size: .875rem;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+.search-wrapper .prefix {
+  margin-left: 0.625rem;
+  margin-right: 0.625rem;
+  margin-bottom: 0.5rem;
+  margin-top: 1.5rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  border-bottom-width: 1px;
+  border-color: rgb(0 0 0 / 0.1);
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+  padding-bottom: 0.375rem;
+  font-size: .75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+.search-wrapper .prefix:first-child {
+  margin-top: 0px;
+}
+@media (prefers-contrast: more) {
+
+  .search-wrapper .prefix {
+    --tw-border-opacity: 1;
+    border-color: rgb(75 85 99 / var(--tw-border-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity));
+  }
+}
+:is(html[class~="dark"] .search-wrapper .prefix) {
+  border-color: rgb(255 255 255 / 0.2);
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+@media (prefers-contrast: more) {
+
+  :is(html[class~="dark"] .search-wrapper .prefix) {
+    --tw-border-opacity: 1;
+    border-color: rgb(249 250 251 / var(--tw-border-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(249 250 251 / var(--tw-text-opacity));
+  }
+}
+.search-wrapper .excerpt {
+  margin-top: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: .875rem;
+  line-height: 1.35rem;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .search-wrapper .excerpt) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+@media (prefers-contrast: more) {
+
+  :is(html[class~="dark"] .search-wrapper .excerpt) {
+    --tw-text-opacity: 1;
+    color: rgb(249 250 251 / var(--tw-text-opacity));
+  }
+}
+.search-wrapper .excerpt {
+    display: -webkit-box;
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+.search-wrapper .match {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
+}
+@media (max-width: 767px) {
+  .sidebar-container {
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    z-index: 15;
+    width: 100%;
+    overscroll-behavior: contain;
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    padding-top: calc(var(--navbar-height));
+  }
+  :is(html[class~="dark"] .sidebar-container) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(17 17 17 / var(--tw-bg-opacity));
+  }
+  .sidebar-container {
+    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
+    will-change: transform, opacity;
+    contain: layout style;
+    backface-visibility: hidden;
+  }
+}
+.sidebar-container li > div {
+  height: 0px;
+}
+.sidebar-container li.open > div {
+  height: auto;
+  padding-top: 0.25rem;
+}
+.sidebar-container li.open > a > span > svg > path {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+nav .search-wrapper {
+  display: none;
+}
+@media (min-width: 768px) {
+
+  nav .search-wrapper {
+    display: inline-block;
+  }
+}
+@supports (
+  ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)))
+) {
+  .nav-container-blur {
+    background-color: rgb(255 255 255 / .85);
+    --tw-backdrop-blur: blur(12px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  }
+  :is(html[class~="dark"] .nav-container-blur) {
+    background-color: rgb(17 17 17 / 0.8) !important;
+  }
+}
+.hamburger-menu svg g {
+  transform-origin: center;
+    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+}
+.hamburger-menu svg path {
+    opacity: 1;
+    transition:
+      transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
+      opacity 0.2s ease 0.2s;
+  }
+.hamburger-menu svg.open path {
+      transition:
+        transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
+        opacity 0s ease 0.2s;
+    }
+.hamburger-menu svg.open g {
+      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
+    }
+.hamburger-menu svg.open > path {
+  opacity: 0;
+}
+.hamburger-menu svg.open > g:nth-of-type(1) {
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.hamburger-menu svg.open > g:nth-of-type(1) path {
+        transform: translate3d(0, 4px, 0);
+      }
+.hamburger-menu svg.open > g:nth-of-type(2) {
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.hamburger-menu svg.open > g:nth-of-type(2) path {
+        transform: translate3d(0, -4px, 0);
+      }
+.hextra-scrollbar {
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
+
+  scrollbar-gutter: stable;
+}
+.hextra-scrollbar::-webkit-scrollbar {
+  height: 0.75rem;
+  width: 0.75rem;
+}
+.hextra-scrollbar::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.hextra-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+}
+.hextra-scrollbar:hover::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    background-color: var(--tw-shadow-color);
+    background-clip: content-box;
+    --tw-shadow-color: rgb(115 115 115 / 0.2);
+    --tw-shadow: var(--tw-shadow-colored);
+  }
+.hextra-scrollbar:hover::-webkit-scrollbar-thumb:hover {
+  --tw-shadow-color: rgb(115 115 115 / 0.4);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+@supports (
+  ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)))
+) {
+  .code-copy-btn {
+    --tw-bg-opacity: .85;
+    --tw-backdrop-blur: blur(12px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  }
+  :is(html[class~="dark"] .code-copy-btn) {
+    --tw-bg-opacity: 0.8;
+  }
+}
+html {
+  font-size: 1rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
+  -webkit-tap-highlight-color: transparent;
+}
+body {
+  width: 100%;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+:is(html[class~="dark"] body) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 17 17 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+body {
+  line-height: 1.75;
+}
+:root {
+  --primary-hue: 212deg;
+  --primary-saturation: 100%;
+  --navbar-height: 4rem;
+  --menu-height: 3.75rem;
+}
+.dark {
+  --primary-hue: 204deg;
+  --primary-saturation: 100%;
+}
+.code-block {
+    line-height: 1.75;
+}
+.home-code .code-block {
+    margin-top: 0!important;
+}
+.placeholder\:text-gray-500::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+.placeholder\:text-gray-500::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+.before\:absolute::before {
+  content: var(--tw-content);
+  position: absolute;
+}
+.before\:inset-y-1::before {
+  content: var(--tw-content);
+  top: 0.25rem;
+  bottom: 0.25rem;
+}
+.before\:w-px::before {
+  content: var(--tw-content);
+  width: 1px;
+}
+.before\:bg-gray-200::before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+.before\:opacity-25::before {
+  content: var(--tw-content);
+  opacity: 0.25;
+}
+.before\:content-\[\'\#\'\]::before {
+  --tw-content: '#';
+  content: var(--tw-content);
+}
+.before\:content-\[\\\"\\\"\]::before {
+  --tw-content: \"\";
+  content: var(--tw-content);
+}
+.first\:mt-0:first-child {
+  margin-top: 0px;
+}
+.hover\:border-gray-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+.hover\:border-gray-900:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity));
+}
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+.hover\:bg-gray-800\/5:hover {
+  background-color: rgb(31 41 55 / 0.05);
+}
+.hover\:bg-slate-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+}
+.hover\:text-black:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+.hover\:text-gray-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+.hover\:text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+.hover\:text-primary-600:hover {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
+}
+.hover\:opacity-75:hover {
+  opacity: 0.75;
+}
+.hover\:shadow-md:hover {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.hover\:shadow-gray-100:hover {
+  --tw-shadow-color: #f3f4f6;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+.focus\:bg-white:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.focus\:ring-4:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.focus\:ring-primary-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / var(--tw-ring-opacity));
+}
+.active\:bg-gray-400\/20:active {
+  background-color: rgb(156 163 175 / 0.2);
+}
+.active\:opacity-50:active {
+  opacity: 0.5;
+}
+.active\:shadow-sm:active {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.active\:shadow-gray-200:active {
+  --tw-shadow-color: #e5e7eb;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+.group\/code:hover .group-hover\/code\:opacity-100 {
+  opacity: 1;
+}
+.group\/copybtn.copied .group-\[\.copied\]\/copybtn\:block {
+  display: block;
+}
+.group\/copybtn.copied .group-\[\.copied\]\/copybtn\:hidden {
+  display: none;
+}
+.group[data-theme=dark] .group-data-\[theme\=dark\]\:hidden {
+  display: none;
+}
+.group[data-theme=light] .group-data-\[theme\=light\]\:hidden {
+  display: none;
+}
+:is([dir="ltr"] .ltr\:right-1) {
+  right: 0.25rem;
+}
+:is([dir="ltr"] .ltr\:right-1\.5) {
+  right: 0.375rem;
+}
+:is([dir="ltr"] .ltr\:-mr-4) {
+  margin-right: -1rem;
+}
+:is([dir="ltr"] .ltr\:ml-3) {
+  margin-left: 0.75rem;
+}
+:is([dir="ltr"] .ltr\:ml-auto) {
+  margin-left: auto;
+}
+:is([dir="ltr"] .ltr\:mr-auto) {
+  margin-right: auto;
+}
+:is([dir="ltr"] .ltr\:rotate-180) {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+:is([dir="ltr"] .ltr\:pl-3) {
+  padding-left: 0.75rem;
+}
+:is([dir="ltr"] .ltr\:pl-4) {
+  padding-left: 1rem;
+}
+:is([dir="ltr"] .ltr\:pl-8) {
+  padding-left: 2rem;
+}
+:is([dir="ltr"] .ltr\:pr-0) {
+  padding-right: 0px;
+}
+:is([dir="ltr"] .ltr\:pr-4) {
+  padding-right: 1rem;
+}
+:is([dir="ltr"] .ltr\:text-right) {
+  text-align: right;
+}
+:is([dir="ltr"] .ltr\:before\:left-0)::before {
+  content: var(--tw-content);
+  left: 0px;
+}
+:is([dir="rtl"] .rtl\:left-1) {
+  left: 0.25rem;
+}
+:is([dir="rtl"] .rtl\:left-1\.5) {
+  left: 0.375rem;
+}
+:is([dir="rtl"] .rtl\:-ml-4) {
+  margin-left: -1rem;
+}
+:is([dir="rtl"] .rtl\:ml-auto) {
+  margin-left: auto;
+}
+:is([dir="rtl"] .rtl\:mr-3) {
+  margin-right: 0.75rem;
+}
+:is([dir="rtl"] .rtl\:mr-auto) {
+  margin-right: auto;
+}
+:is([dir="rtl"] .rtl\:-rotate-180) {
+  --tw-rotate: -180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+:is([dir="rtl"] .rtl\:pl-4) {
+  padding-left: 1rem;
+}
+:is([dir="rtl"] .rtl\:pr-3) {
+  padding-right: 0.75rem;
+}
+:is([dir="rtl"] .rtl\:pr-4) {
+  padding-right: 1rem;
+}
+:is([dir="rtl"] .rtl\:pr-8) {
+  padding-right: 2rem;
+}
+:is([dir="rtl"] .rtl\:text-left) {
+  text-align: left;
+}
+:is([dir="rtl"] .rtl\:before\:right-0)::before {
+  content: var(--tw-content);
+  right: 0px;
+}
+@media (prefers-contrast: more) {
+
+  .contrast-more\:border {
+    border-width: 1px;
+  }
+
+  .contrast-more\:border-t {
+    border-top-width: 1px;
+  }
+
+  .contrast-more\:border-current {
+    border-color: currentColor;
+  }
+
+  .contrast-more\:border-gray-800 {
+    --tw-border-opacity: 1;
+    border-color: rgb(31 41 55 / var(--tw-border-opacity));
+  }
+
+  .contrast-more\:border-gray-900 {
+    --tw-border-opacity: 1;
+    border-color: rgb(17 24 39 / var(--tw-border-opacity));
+  }
+
+  .contrast-more\:border-neutral-400 {
+    --tw-border-opacity: 1;
+    border-color: rgb(163 163 163 / var(--tw-border-opacity));
+  }
+
+  .contrast-more\:border-primary-500 {
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
+  }
+
+  .contrast-more\:border-transparent {
+    border-color: transparent;
+  }
+
+  .contrast-more\:font-bold {
+    font-weight: 700;
+  }
+
+  .contrast-more\:text-current {
+    color: currentColor;
+  }
+
+  .contrast-more\:text-gray-700 {
+    --tw-text-opacity: 1;
+    color: rgb(55 65 81 / var(--tw-text-opacity));
+  }
+
+  .contrast-more\:text-gray-800 {
+    --tw-text-opacity: 1;
+    color: rgb(31 41 55 / var(--tw-text-opacity));
+  }
+
+  .contrast-more\:text-gray-900 {
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity));
+  }
+
+  .contrast-more\:underline {
+    text-decoration-line: underline;
+  }
+
+  .contrast-more\:shadow-\[0_0_0_1px_\#000\] {
+    --tw-shadow: 0 0 0 1px #000;
+    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  .contrast-more\:shadow-none {
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  .contrast-more\:hover\:border-gray-900:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(17 24 39 / var(--tw-border-opacity));
+  }
+}
+:is(html[class~="dark"] .dark\:block) {
+  display: block;
+}
+:is(html[class~="dark"] .dark\:hidden) {
+  display: none;
+}
+:is(html[class~="dark"] .dark\:border-gray-100\/20) {
+  border-color: rgb(243 244 246 / 0.2);
+}
+:is(html[class~="dark"] .dark\:border-gray-400) {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+:is(html[class~="dark"] .dark\:border-gray-700) {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+:is(html[class~="dark"] .dark\:border-neutral-800) {
+  --tw-border-opacity: 1;
+  border-color: rgb(38 38 38 / var(--tw-border-opacity));
+}
+:is(html[class~="dark"] .dark\:border-white) {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+:is(html[class~="dark"] .dark\:border-white\/10) {
+  border-color: rgb(255 255 255 / 0.1);
+}
+:is(html[class~="dark"] .dark\:bg-black\/60) {
+  background-color: rgb(0 0 0 / 0.6);
+}
+:is(html[class~="dark"] .dark\:bg-dark) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 17 17 / var(--tw-bg-opacity));
+}
+:is(html[class~="dark"] .dark\:bg-dark\/50) {
+  background-color: rgb(17 17 17 / 0.5);
+}
+:is(html[class~="dark"] .dark\:bg-gray-50\/10) {
+  background-color: rgb(249 250 251 / 0.1);
+}
+:is(html[class~="dark"] .dark\:bg-gray-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+:is(html[class~="dark"] .dark\:bg-neutral-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+}
+:is(html[class~="dark"] .dark\:bg-primary-300\/10) {
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
+}
+:is(html[class~="dark"] .dark\:bg-primary-400\/10) {
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / 0.1);
+}
+:is(html[class~="dark"] .dark\:bg-white) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+:is(html[class~="dark"] .dark\:text-black) {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:text-gray-100) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:text-gray-300) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:text-gray-400) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:text-neutral-200) {
+  --tw-text-opacity: 1;
+  color: rgb(229 229 229 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:text-neutral-400) {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:text-primary-600) {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:text-white) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:shadow-\[0_-12px_16px_\#111\]) {
+  --tw-shadow: 0 -12px 16px #111;
+  --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+:is(html[class~="dark"] .dark\:shadow-\[0_-1px_0_rgba\(255\2c 255\2c 255\2c \.1\)_inset\]) {
+  --tw-shadow: 0 -1px 0 rgba(255,255,255,.1) inset;
+  --tw-shadow-colored: inset 0 -1px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+:is(html[class~="dark"] .dark\:shadow-none) {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+:is(html[class~="dark"] .dark\:placeholder\:text-gray-400)::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:placeholder\:text-gray-400)::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:before\:bg-neutral-800)::before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+:is(html[class~="dark"] .dark\:hover\:border-gray-100:hover) {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+:is(html[class~="dark"] .dark\:hover\:border-neutral-700:hover) {
+  --tw-border-opacity: 1;
+  border-color: rgb(64 64 64 / var(--tw-border-opacity));
+}
+:is(html[class~="dark"] .dark\:hover\:bg-gray-100\/5:hover) {
+  background-color: rgb(243 244 246 / 0.05);
+}
+:is(html[class~="dark"] .dark\:hover\:bg-neutral-900:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+}
+:is(html[class~="dark"] .dark\:hover\:bg-primary-100\/5:hover) {
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.05);
+}
+:is(html[class~="dark"] .dark\:hover\:text-gray-100:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:hover\:text-gray-200:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:hover\:text-gray-300:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:hover\:text-gray-50:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:hover\:text-neutral-50:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(250 250 250 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:hover\:text-white:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+:is(html[class~="dark"] .dark\:hover\:shadow-none:hover) {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+:is(html[class~="dark"] .dark\:focus\:bg-dark:focus) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 17 17 / var(--tw-bg-opacity));
+}
+:is(html[class~="dark"] .dark\:focus\:ring-primary-800:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-ring-opacity));
+}
+@media (prefers-contrast: more) {
+
+  :is(html[class~="dark"] .contrast-more\:dark\:border-current) {
+    border-color: currentColor;
+  }
+
+  :is(html[class~="dark"] .contrast-more\:dark\:border-gray-50) {
+    --tw-border-opacity: 1;
+    border-color: rgb(249 250 251 / var(--tw-border-opacity));
+  }
+
+  :is(html[class~="dark"] .contrast-more\:dark\:border-neutral-400) {
+    --tw-border-opacity: 1;
+    border-color: rgb(163 163 163 / var(--tw-border-opacity));
+  }
+
+  :is(html[class~="dark"] .contrast-more\:dark\:border-primary-500) {
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
+  }
+
+  :is(html[class~="dark"] .dark\:contrast-more\:border-neutral-400) {
+    --tw-border-opacity: 1;
+    border-color: rgb(163 163 163 / var(--tw-border-opacity));
+  }
+
+  :is(html[class~="dark"] .contrast-more\:dark\:text-current) {
+    color: currentColor;
+  }
+
+  :is(html[class~="dark"] .contrast-more\:dark\:text-gray-100) {
+    --tw-text-opacity: 1;
+    color: rgb(243 244 246 / var(--tw-text-opacity));
+  }
+
+  :is(html[class~="dark"] .contrast-more\:dark\:text-gray-300) {
+    --tw-text-opacity: 1;
+    color: rgb(209 213 219 / var(--tw-text-opacity));
+  }
+
+  :is(html[class~="dark"] .contrast-more\:dark\:text-gray-50) {
+    --tw-text-opacity: 1;
+    color: rgb(249 250 251 / var(--tw-text-opacity));
+  }
+
+  :is(html[class~="dark"] .contrast-more\:dark\:shadow-\[0_0_0_1px_\#fff\]) {
+    --tw-shadow: 0 0 0 1px #fff;
+    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  :is(html[class~="dark"] .contrast-more\:dark\:shadow-none) {
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  :is(html[class~="dark"] .contrast-more\:dark\:hover\:border-gray-50:hover) {
+    --tw-border-opacity: 1;
+    border-color: rgb(249 250 251 / var(--tw-border-opacity));
+  }
+}
+@media print {
+
+  .print\:hidden {
+    display: none;
+  }
+}
+@media not all and (min-width: 768px) {
+
+  .max-md\:hidden {
+    display: none;
+  }
+
+  .max-md\:\[transform\:translate3d\(0\2c -100\%\2c 0\)\] {
+    transform: translate3d(0,-100%,0);
+  }
+}
+@media (min-width: 640px) {
+
+  .sm\:flex {
+    display: flex;
+  }
+
+  .sm\:text-xl {
+    font-size: 1.25rem;
+  }
+}
+@media (min-width: 768px) {
+
+  .md\:sticky {
+    position: sticky;
+  }
+
+  .md\:top-16 {
+    top: 4rem;
+  }
+
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .md\:mr-5 {
+    margin-right: 1.25rem;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
+  .md\:inline-block {
+    display: inline-block;
+  }
+
+  .md\:inline {
+    display: inline;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] {
+    height: calc(100vh - var(--navbar-height) - var(--menu-height));
+  }
+
+  .md\:max-h-\[min\(calc\(100vh-5rem-env\(safe-area-inset-bottom\)\)\2c 400px\)\] {
+    max-height: min(calc(100vh - 5rem - env(safe-area-inset-bottom)),400px);
+  }
+
+  .md\:w-64 {
+    width: 16rem;
+  }
+
+  .md\:shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:self-start {
+    align-self: flex-start;
+  }
+
+  .md\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .md\:pt-12 {
+    padding-top: 3rem;
+  }
+
+  .md\:text-lg {
+    font-size: 1.125rem;
+  }
+
+  .md\:text-sm {
+    font-size: .875rem;
+  }
+
+  :is([dir="ltr"] .ltr\:md\:left-auto) {
+    left: auto;
+  }
+
+  :is([dir="rtl"] .rtl\:md\:right-auto) {
+    right: auto;
+  }
+}
+@media (min-width: 1024px) {
+
+  .lg\:order-first {
+    order: -9999;
+  }
+
+  .lg\:order-none {
+    order: 0;
+  }
+
+  .lg\:my-12 {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
+
+  .lg\:grid {
+    display: grid;
+  }
+
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .lg\:text-left {
+    text-align: left;
+  }
+
+  .lg\:text-\[4rem\] {
+    font-size: 4rem;
+  }
+}
+@media (min-width: 1280px) {
+
+  .xl\:block {
+    display: block;
+  }
+}
diff --git a/assets/css/components/cards.css b/assets/css/components/cards.css
new file mode 100644
index 0000000..f867274
--- /dev/null
+++ b/assets/css/components/cards.css
@@ -0,0 +1,29 @@
+.hextra-cards {
+  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
+}
+
+.hextra-card img {
+  user-select: none;
+}
+
+.hextra-card:hover svg {
+  color: currentColor;
+}
+
+.hextra-card svg {
+  width: 1.5rem;
+  color: #00000033;
+  transition: color 0.3s ease;
+}
+
+.hextra-card p {
+  margin-top: 0.5rem;
+}
+
+.dark .hextra-card svg {
+  color: #ffffff66;
+}
+
+.dark .hextra-card:hover svg {
+  color: currentColor;
+}
diff --git a/assets/css/components/code-copy.css b/assets/css/components/code-copy.css
new file mode 100644
index 0000000..4547fea
--- /dev/null
+++ b/assets/css/components/code-copy.css
@@ -0,0 +1,7 @@
+@supports (
+  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
+) {
+  .code-copy-btn {
+    @apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
+  }
+}
diff --git a/assets/css/components/navbar.css b/assets/css/components/navbar.css
new file mode 100644
index 0000000..8bca91d
--- /dev/null
+++ b/assets/css/components/navbar.css
@@ -0,0 +1,55 @@
+nav {
+  .search-wrapper {
+    @apply hidden md:inline-block;
+  }
+}
+
+@supports (
+  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
+) {
+  .nav-container-blur {
+    @apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80;
+  }
+}
+
+.hamburger-menu svg {
+  g {
+    @apply origin-center;
+    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+  path {
+    opacity: 1;
+    transition:
+      transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
+      opacity 0.2s ease 0.2s;
+  }
+
+  &.open {
+    path {
+      transition:
+        transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
+        opacity 0s ease 0.2s;
+    }
+    g {
+      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
+    }
+  }
+
+  &.open > {
+    path {
+      @apply opacity-0;
+    }
+    g:nth-of-type(1) {
+      @apply rotate-45;
+      path {
+        transform: translate3d(0, 4px, 0);
+      }
+    }
+    g:nth-of-type(2) {
+      @apply -rotate-45;
+      path {
+        transform: translate3d(0, -4px, 0);
+      }
+    }
+  }
+}
diff --git a/assets/css/components/scrollbar.css b/assets/css/components/scrollbar.css
new file mode 100644
index 0000000..e60c1d1
--- /dev/null
+++ b/assets/css/components/scrollbar.css
@@ -0,0 +1,21 @@
+.hextra-scrollbar {
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
+
+  scrollbar-gutter: stable;
+  &::-webkit-scrollbar {
+    @apply w-3 h-3;
+  }
+  &::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-[10px];
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    background-color: var(--tw-shadow-color);
+    background-clip: content-box;
+    @apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
+  }
+}
diff --git a/assets/css/components/search.css b/assets/css/components/search.css
new file mode 100644
index 0000000..1994f84
--- /dev/null
+++ b/assets/css/components/search.css
@@ -0,0 +1,38 @@
+.search-wrapper {
+  li {
+    @apply mx-2.5 break-words rounded-md contrast-more:border text-gray-800 contrast-more:border-transparent dark:text-gray-300;
+    a {
+      @apply block scroll-m-12 px-2.5 py-2;
+    }
+
+    .title {
+      @apply text-base font-semibold leading-5;
+    }
+
+    .active {
+      @apply rounded-md bg-primary-500/10 contrast-more:border-primary-500;
+    }
+  }
+
+  .no-result {
+    @apply block select-none p-8 text-center text-sm text-gray-400;
+  }
+
+  .prefix {
+    @apply mx-2.5 mb-2 mt-6 select-none border-b border-black/10 px-2.5 pb-1.5 text-xs font-semibold
+    uppercase text-gray-500 first:mt-0 dark:border-white/20 dark:text-gray-300 contrast-more:border-gray-600
+    contrast-more:text-gray-900 contrast-more:dark:border-gray-50 contrast-more:dark:text-gray-50;
+  }
+
+  .excerpt {
+    @apply overflow-hidden text-ellipsis mt-1 text-sm leading-[1.35rem] text-gray-600 dark:text-gray-400 contrast-more:dark:text-gray-50;
+    display: -webkit-box;
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+
+  .match {
+    @apply text-primary-600;
+  }
+}
diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css
new file mode 100644
index 0000000..0ccbfb9
--- /dev/null
+++ b/assets/css/components/sidebar.css
@@ -0,0 +1,21 @@
+@media (max-width: 767px) {
+  .sidebar-container {
+    @apply fixed pt-[calc(var(--navbar-height))] top-0 w-full bottom-0 z-[15] overscroll-contain bg-white dark:bg-dark;
+    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
+    will-change: transform, opacity;
+    contain: layout style;
+    backface-visibility: hidden;
+  }
+}
+
+.sidebar-container {
+  li > div {
+    @apply h-0;
+  }
+  li.open > div {
+    @apply h-auto pt-1;
+  }
+  li.open > a > span > svg > path {
+    @apply rotate-90;
+  }
+}
diff --git a/assets/css/components/steps.css b/assets/css/components/steps.css
new file mode 100644
index 0000000..680d02d
--- /dev/null
+++ b/assets/css/components/steps.css
@@ -0,0 +1,11 @@
+.steps h3 {
+  counter-increment: step;
+
+  &:before {
+    @apply absolute w-[33px] h-[33px];
+    @apply border-4 border-white bg-gray-100 dark:border-dark dark:bg-neutral-800;
+    @apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
+    @apply mt-[3px] ml-[-41px];
+    content: counter(step);
+  }
+}
diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..78baf53
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,9 @@
+:is(html[class~="dark"] .sidebar-container),
+:is(html[class~="dark"] body) {
+  background-color: black;
+}
+
+:is(html[class~="dark"] .dark\:bg-dark),
+:is(html[class~="dark"] .nav-container-blur) {
+  background-color: rgba(0, 0, 0, 0.8) !important;
+}
diff --git a/assets/css/highlight.css b/assets/css/highlight.css
new file mode 100644
index 0000000..2e7f387
--- /dev/null
+++ b/assets/css/highlight.css
@@ -0,0 +1,48 @@
+/* Code syntax highlight */
+@import "chroma/light.css";
+@import "chroma/dark.css";
+
+.code-block {
+  @apply text-[.9em] leading-5;
+
+  pre {
+    @apply text-[.9em] bg-primary-700/5 overflow-x-auto font-medium subpixel-antialiased dark:bg-primary-300/10 contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40;
+  }
+
+  .filename {
+    @apply absolute top-0 z-[1] w-full truncate rounded-t-xl bg-primary-700/5 py-2 px-4 text-xs text-gray-700 dark:bg-primary-300/10 dark:text-gray-200;
+  }
+}
+
+.code-block pre:not(.lntable pre) {
+  @apply px-4 mb-4 py-4 rounded-xl;
+}
+
+.code-block div:nth-of-type(2) pre {
+  @apply pt-12 pb-4;
+}
+
+.chroma {
+  .lntable {
+    @apply m-0 block w-auto overflow-auto rounded-xl;
+
+    pre {
+      @apply pt-4 pb-4;
+    }
+  }
+  .ln,
+  .lnt:not(.hl > .lnt),
+  .hl:not(.line) {
+    @apply pl-4 pr-4 min-w-[2.6rem] text-neutral-600 dark:text-neutral-300;
+  }
+  .lntd {
+    @apply p-0 align-top;
+  }
+  .lntd:last-of-type {
+    @apply w-full;
+  }
+  /* LineHighlight */
+  .hl {
+    @apply block w-full bg-primary-800/10;
+  }
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
new file mode 100644
index 0000000..8148a6c
--- /dev/null
+++ b/assets/css/styles.css
@@ -0,0 +1,42 @@
+@import "tailwind.css";
+
+@import "typography.css";
+@import "highlight.css";
+@import "components/cards.css";
+@import "components/steps.css";
+@import "components/search.css";
+@import "components/sidebar.css";
+@import "components/navbar.css";
+@import "components/scrollbar.css";
+@import "components/code-copy.css";
+
+html {
+  @apply text-base antialiased;
+  font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  @apply w-full bg-white dark:bg-dark dark:text-gray-100;
+  line-height: 1.75;
+}
+
+:root {
+  --primary-hue: 212deg;
+  --primary-saturation: 100%;
+  --navbar-height: 4rem;
+  --menu-height: 3.75rem;
+}
+
+.dark {
+  --primary-hue: 204deg;
+  --primary-saturation: 100%;
+}
+
+.code-block {
+    line-height: 1.75;
+}
+
+.home-code .code-block {
+    margin-top: 0!important;
+}
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/assets/css/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/assets/css/typography.css b/assets/css/typography.css
new file mode 100644
index 0000000..11d7cde
--- /dev/null
+++ b/assets/css/typography.css
@@ -0,0 +1,113 @@
+.content {
+  :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100;
+  }
+  :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-10 border-b pb-1 text-3xl border-neutral-200/70 contrast-more:border-neutral-400 dark:border-primary-100/10 contrast-more:dark:border-neutral-400;
+  }
+  :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-2xl;
+  }
+  :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-xl;
+  }
+  :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-lg;
+  }
+  :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-base;
+  }
+  :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply mt-6 leading-7 first:mt-0;
+  }
+  :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
+  }
+  :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6;
+  }
+  :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
+    @apply bg-primary-700/5 mb-4 overflow-x-auto rounded-xl font-medium subpixel-antialiased dark:bg-primary-300/10 text-[.9em] contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40 py-4;
+  }
+  :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
+    @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
+  }
+  :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
+    @apply block overflow-x-auto mt-6 p-0 first:mt-0;
+
+    tr {
+      @apply m-0 border-t border-gray-300 p-0 dark:border-gray-600 even:bg-gray-100 even:dark:bg-gray-600/20;
+    }
+    th {
+      @apply m-0 border border-gray-300 px-4 py-2 font-semibold dark:border-gray-600;
+    }
+    td {
+      @apply m-0 border border-gray-300 px-4 py-2 dark:border-gray-600;
+    }
+  }
+  :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply mt-6 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6;
+    li {
+      @apply my-2;
+    }
+  }
+  :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply mt-6 list-disc first:mt-0 ltr:ml-6 rtl:mr-6;
+    li {
+      @apply my-2;
+    }
+  }
+  :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
+  }
+  :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
+    @apply bg-transparent rounded-none dark:bg-transparent;
+  }
+  :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    @apply mx-auto my-4 rounded-md;
+  }
+  :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
+    figcaption {
+      @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
+    }
+  }
+  .footnotes {
+    @apply mt-12 text-sm;
+  }
+}
+
+.subheading-anchor {
+  @apply opacity-0 transition-opacity ltr:ml-1 rtl:mr-1;
+
+  span:target + &,
+  :hover > &,
+  &:focus {
+    @apply opacity-100;
+  }
+
+  span + &,
+  :hover > & {
+    @apply !no-underline;
+  }
+
+  &:after {
+    @apply content-['#'] px-1;
+    @apply text-gray-300 dark:text-neutral-700;
+    span:target + & {
+      @apply text-gray-400;
+      @apply dark:text-neutral-500;
+    }
+  }
+}
+
+article details > summary {
+  &::-webkit-details-marker {
+    @apply hidden;
+  }
+  &::before {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
+    height: 1.2em;
+    width: 1.2em;
+    vertical-align: -4px;
+  }
+}