diff --git a/.gitignore b/.gitignore
index 1afde1e..35c3c4e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,5 +2,4 @@ node_modules/
 public/
 resources/
 
-hugo_stats.json
 .hugo_build.lock
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
new file mode 100644
index 0000000..1e8be2a
--- /dev/null
+++ b/assets/css/compiled/main.css
@@ -0,0 +1,3684 @@
+.content h1 {
+  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 h1) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+  .content h2 {
+  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 h2 {
+    --tw-border-opacity: 1;
+    border-color: rgb(163 163 163 / var(--tw-border-opacity));
+  }
+}
+  :is(html[class~="dark"] .content h2) {
+  border-color: hsl(var(--primary-hue) 100% 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 h2) {
+    --tw-border-opacity: 1;
+    border-color: rgb(163 163 163 / var(--tw-border-opacity));
+  }
+}
+  .content h3 {
+  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 h3) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+  .content h4 {
+  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 h4) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+  .content h5 {
+  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 h5) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+  .content h6 {
+  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 h6) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+  .content p {
+  margin-top: 1.5rem;
+  line-height: 1.75rem;
+}
+  .content p:first-child {
+  margin-top: 0px;
+}
+  .content a {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+  text-decoration-line: underline;
+  text-decoration-thickness: from-font;
+  text-underline-position: from-font;
+}
+  .content .not-prose a {
+  color: currentColor;
+  text-decoration-line: none;
+}
+  .content blockquote {
+  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 blockquote:first-child {
+  margin-top: 0px;
+}
+  :is([dir="ltr"] .content blockquote) {
+  border-left-width: 2px;
+  padding-left: 1.5rem;
+}
+  :is([dir="rtl"] .content blockquote) {
+  border-right-width: 2px;
+  padding-right: 1.5rem;
+}
+  :is(html[class~="dark"] .content blockquote) {
+  --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 pre:not(.code-block pre) {
+  margin-bottom: 1rem;
+  overflow-x: auto;
+  border-radius: 0.75rem;
+  background-color: hsl(var(--primary-hue) 100% 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 pre:not(.code-block pre) {
+    border-width: 1px;
+    border-color: hsl(var(--primary-hue) 100% 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 pre:not(.code-block pre)) {
+  background-color: hsl(var(--primary-hue) 100% 77% / 0.1);
+}
+  @media (prefers-contrast: more) {
+  :is(html[class~="dark"] .content pre:not(.code-block pre)) {
+    border-color: hsl(var(--primary-hue) 100% 94% / 0.4);
+  }
+}
+  .content code:not(.code-block code) {
+  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 code:not(.code-block code)) {
+  border-color: rgb(255 255 255 / 0.1);
+  background-color: rgb(255 255 255 / 0.1);
+}
+  .content table:not(.code-block table) {
+  margin-top: 1.5rem;
+  display: block;
+  overflow-x: auto;
+  padding: 0px;
+}
+  .content table:not(.code-block table):first-child {
+  margin-top: 0px;
+}
+  .content table:not(.code-block table) tr {
+  margin: 0px;
+  border-top-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  padding: 0px;
+}
+  .content table:not(.code-block table) tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+  :is(html[class~="dark"] .content table:not(.code-block table) tr) {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+  :is(html[class~="dark"] .content table:not(.code-block table) tr):nth-child(even) {
+  background-color: rgb(75 85 99 / 0.2);
+}
+  .content table:not(.code-block table) 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 table:not(.code-block table) th) {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+  .content table:not(.code-block table) 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 table:not(.code-block table) td) {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+  .content ol {
+  margin-top: 1.5rem;
+  list-style-type: decimal;
+}
+  .content ol:first-child {
+  margin-top: 0px;
+}
+  :is([dir="ltr"] .content ol) {
+  margin-left: 1.5rem;
+}
+  :is([dir="rtl"] .content ol) {
+  margin-right: 1.5rem;
+}
+  .content ol li {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+  .content ul {
+  margin-top: 1.5rem;
+  list-style-type: disc;
+}
+  .content ul:first-child {
+  margin-top: 0px;
+}
+  :is([dir="ltr"] .content ul) {
+  margin-left: 1.5rem;
+}
+  :is([dir="rtl"] .content ul) {
+  margin-right: 1.5rem;
+}
+  .content ul li {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+  .content kbd {
+  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 kbd) {
+  border-color: rgb(255 255 255 / 0.1);
+  background-color: rgb(255 255 255 / 0.1);
+}
+
+.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.typesetting-article {
+  font-size: 17px;
+  font-feature-settings:
+    'rlig' 1,
+    'calt' 1;
+}
+
+article.typesetting-article h1 {
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  text-align: center;
+    font-size: 2.5rem;
+}
+
+article.typesetting-article h2 {
+  border-style: none;
+}
+
+article.typesetting-article a {
+  text-decoration-line: none;
+}
+
+article.typesetting-article a:hover {
+  text-decoration-line: underline;
+}
+
+article.typesetting-article p {
+  line-height: 2rem;
+}
+
+article.typesetting-article code {
+  border-style: none;
+}
+
+:is(html[class~="dark"] article.typesetting-article code) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+}
+
+:is(html[class~="dark"] article.typesetting-article pre code) {
+  background-color: transparent;
+}
+
+article.typesetting-article .subheading-anchor + a {
+  text-decoration-line: none;
+}
+
+article.typesetting-article .subheading-anchor + a::after {
+  content: var(--tw-content);
+  display: none;
+}
+
+article.typesetting-article .subheading-anchor + a:hover {
+  text-decoration-line: none;
+}
+
+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) 100% 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) 100% 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) 100% 77% / 0.1);
+}
+
+@media (prefers-contrast: more) {
+  :is(html[class~="dark"] .code-block pre) {
+    border-color: hsl(var(--primary-hue) 100% 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) 100% 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) 100% 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 .lnt,
+  .chroma .ln {
+  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 .lnt),:is(html[class~="dark"] 
+  .chroma .ln) {
+  --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) 100% 32% / 0.1);
+}
+
+.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;
+}
+
+.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) 100% 50% / 0.1);
+}
+
+@media (prefers-contrast: more) {
+  .search-wrapper li .active {
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity));
+  }
+}
+
+.search-wrapper .no-result {
+  display: block;
+  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;
+  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) 100% 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;
+  }
+}
+
+nav .search-wrapper {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  nav .search-wrapper {
+    display: inline-block;
+  }
+}
+
+.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, 6px, 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, -6px, 0);
+      }
+
+/* ! tailwindcss v3.3.3 | 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 */
+  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]) {
+  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::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:  ;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+.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;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.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-20 {
+  z-index: 20;
+}
+
+.z-\[-1\] {
+  z-index: -1;
+}
+
+.order-last {
+  order: 9999;
+}
+
+.m-\[11px\] {
+  margin: 11px;
+}
+
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.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-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.-mb-0 {
+  margin-bottom: -0px;
+}
+
+.-mb-0\.5 {
+  margin-bottom: -0.125rem;
+}
+
+.-ml-2 {
+  margin-left: -0.5rem;
+}
+
+.-mr-2 {
+  margin-right: -0.5rem;
+}
+
+.-mt-20 {
+  margin-top: -5rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.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-4 {
+  margin-top: 1rem;
+}
+
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.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;
+}
+
+.table {
+  display: table;
+}
+
+.grid {
+  display: grid;
+}
+
+.contents {
+  display: contents;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-0 {
+  height: 0px;
+}
+
+.h-16 {
+  height: 4rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-7 {
+  height: 1.75rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.max-h-\[calc\(100vh-4rem-env\(safe-area-inset-bottom\)\)\] {
+  max-height: calc(100vh - 4rem - 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-4rem\)\] {
+  min-height: calc(100vh - 4rem);
+}
+
+.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-max {
+  width: max-content;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.min-w-0 {
+  min-width: 0px;
+}
+
+.min-w-\[24px\] {
+  min-width: 24px;
+}
+
+.min-w-full {
+  min-width: 100%;
+}
+
+.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));
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.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-default {
+  cursor: default;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.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;
+}
+
+.list-none {
+  list-style-type: none;
+}
+
+.appearance-none {
+  appearance: none;
+}
+
+.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;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.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-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
+.border-l {
+  border-left-width: 1px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-black\/5 {
+  border-color: rgb(0 0 0 / 0.05);
+}
+
+.border-blue-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(191 219 254 / var(--tw-border-opacity));
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+.border-orange-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 237 213 / var(--tw-border-opacity));
+}
+
+.border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity));
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-yellow-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 249 195 / var(--tw-border-opacity));
+}
+
+.bg-black\/\[\.05\] {
+  background-color: rgb(0 0 0 / .05);
+}
+
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+}
+
+.bg-orange-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
+}
+
+.bg-primary-100 {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary-hue) 100% 94% / var(--tw-bg-opacity));
+}
+
+.bg-primary-700\/5 {
+  background-color: hsl(var(--primary-hue) 100% 39% / 0.05);
+}
+
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.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;
+}
+
+.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-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.pb-\[env\(safe-area-inset-bottom\)\] {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.pb-px {
+  padding-bottom: 1px;
+}
+
+.pl-6 {
+  padding-left: 1.5rem;
+}
+
+.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-right\)\2c 1\.5rem\)\] {
+  padding-right: max(env(safe-area-inset-right),1.5rem);
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.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;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+}
+
+.text-\[10px\] {
+  font-size: 10px;
+}
+
+.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-5 {
+  line-height: 1.25rem;
+}
+
+.leading-7 {
+  line-height: 1.75rem;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.tracking-tight {
+  letter-spacing: -0.015em;
+}
+
+.text-\[color\:hsl\(var\(--primary-hue\)\2c 100\%\2c 50\%\)\] {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) 100% 50% / var(--tw-text-opacity));
+}
+
+.text-blue-900 {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / 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-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.text-orange-800 {
+  --tw-text-opacity: 1;
+  color: rgb(154 52 18 / var(--tw-text-opacity));
+}
+
+.text-primary-800 {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) 100% 32% / var(--tw-text-opacity));
+}
+
+.text-red-900 {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity));
+}
+
+.text-slate-900 {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity));
+}
+
+.text-yellow-900 {
+  --tw-text-opacity: 1;
+  color: rgb(113 63 18 / var(--tw-text-opacity));
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.no-underline {
+  text-decoration-line: none;
+}
+
+.decoration-from-font {
+  text-decoration-thickness: from-font;
+}
+
+.underline-offset-2 {
+  text-underline-offset: 2px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-80 {
+  opacity: 0.8;
+}
+
+.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);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, 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;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.\[-webkit-tap-highlight-color\:transparent\] {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.\[-webkit-touch-callout\:none\] {
+  -webkit-touch-callout: none;
+}
+
+.\[counter-reset\:step\] {
+  counter-reset: step;
+}
+
+.\[hyphens\:auto\] {
+  hyphens: auto;
+}
+
+.\[text-underline-position\:from-font\] {
+  text-underline-position: from-font;
+}
+
+.\[word-break\:break-word\] {
+  word-break: break-word;
+}
+
+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));
+}
+
+:root {
+  --primary-hue: 212deg;
+  --navbar-height: 4rem;
+  --menu-height: 3.75rem;
+}
+
+.dark {
+  --primary-hue: 204deg;
+}
+
+.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\:mr-1::before {
+  content: var(--tw-content);
+  margin-right: 0.25rem;
+}
+
+.before\:inline-block::before {
+  content: var(--tw-content);
+  display: inline-block;
+}
+
+.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\:transition-transform::before {
+  content: var(--tw-content);
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.before\:content-\[\"\"\]::before {
+  --tw-content: "";
+  content: var(--tw-content);
+}
+
+.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;
+}
+
+.last-of-type\:mb-0:last-of-type {
+  margin-bottom: 0px;
+}
+
+.hover\:border-gray-200:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+.hover\:border-gray-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / 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-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) 100% 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));
+}
+
+.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;
+}
+
+.data-\[state\=selected\]\:block[data-state=selected] {
+  display: block;
+}
+
+.data-\[state\=selected\]\:border-primary-500[data-state=selected] {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity));
+}
+
+.data-\[state\=selected\]\:text-primary-600[data-state=selected] {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+}
+
+.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\:pr-0) {
+  padding-right: 0px;
+}
+
+:is([dir="ltr"] .ltr\:pr-2) {
+  padding-right: 0.5rem;
+}
+
+: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\:pl-2) {
+  padding-left: 0.5rem;
+}
+
+: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\:text-left) {
+  text-align: left;
+}
+
+:is([dir="rtl"] .rtl\:before\:right-0)::before {
+  content: var(--tw-content);
+  right: 0px;
+}
+
+:is([dir="rtl"] .rtl\:before\:rotate-180)::before {
+  content: var(--tw-content);
+  --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));
+}
+
+@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-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) 100% 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\:border-blue-200\/30) {
+  border-color: rgb(191 219 254 / 0.3);
+}
+
+:is(html[class~="dark"] .dark\:border-gray-100\/20) {
+  border-color: rgb(243 244 246 / 0.2);
+}
+
+: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-orange-400\/30) {
+  border-color: rgb(251 146 60 / 0.3);
+}
+
+:is(html[class~="dark"] .dark\:border-red-200\/30) {
+  border-color: rgb(254 202 202 / 0.3);
+}
+
+:is(html[class~="dark"] .dark\:border-white\/10) {
+  border-color: rgb(255 255 255 / 0.1);
+}
+
+:is(html[class~="dark"] .dark\:border-yellow-200\/30) {
+  border-color: rgb(254 240 138 / 0.3);
+}
+
+:is(html[class~="dark"] .dark\:bg-blue-900\/30) {
+  background-color: rgb(30 58 138 / 0.3);
+}
+
+: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-neutral-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / 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-orange-400\/20) {
+  background-color: rgb(251 146 60 / 0.2);
+}
+
+:is(html[class~="dark"] .dark\:bg-primary-300\/10) {
+  background-color: hsl(var(--primary-hue) 100% 77% / 0.1);
+}
+
+:is(html[class~="dark"] .dark\:bg-primary-400\/10) {
+  background-color: hsl(var(--primary-hue) 100% 66% / 0.1);
+}
+
+:is(html[class~="dark"] .dark\:bg-red-900\/30) {
+  background-color: rgb(127 29 29 / 0.3);
+}
+
+:is(html[class~="dark"] .dark\:bg-yellow-700\/30) {
+  background-color: rgb(161 98 7 / 0.3);
+}
+
+:is(html[class~="dark"] .dark\:text-blue-200) {
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / 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-200) {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / 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-orange-300) {
+  --tw-text-opacity: 1;
+  color: rgb(253 186 116 / var(--tw-text-opacity));
+}
+
+:is(html[class~="dark"] .dark\:text-primary-600) {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+}
+
+:is(html[class~="dark"] .dark\:text-red-200) {
+  --tw-text-opacity: 1;
+  color: rgb(254 202 202 / var(--tw-text-opacity));
+}
+
+:is(html[class~="dark"] .dark\:text-slate-100) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+
+:is(html[class~="dark"] .dark\:text-yellow-200) {
+  --tw-text-opacity: 1;
+  color: rgb(254 240 138 / 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)::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\:before\:invert)::before {
+  content: var(--tw-content);
+  --tw-invert: invert(100%);
+  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"] .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\:border-neutral-800:hover) {
+  --tw-border-opacity: 1;
+  border-color: rgb(38 38 38 / var(--tw-border-opacity));
+}
+
+:is(html[class~="dark"] .dark\:hover\:bg-neutral-800:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
+: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) 100% 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));
+}
+
+@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) 100% 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;
+  }
+  .print\:bg-transparent {
+    background-color: transparent;
+  }
+}
+
+@media not all and (min-width: 1280px) {
+  .max-xl\: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\:items-start {
+    align-items: flex-start;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:sticky {
+    position: sticky;
+  }
+  .md\:top-16 {
+    top: 4rem;
+  }
+  .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\:justify-start {
+    justify-content: flex-start;
+  }
+  .md\:self-start {
+    align-self: flex-start;
+  }
+  .md\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+  .md\:text-5xl {
+    font-size: 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\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:block {
+    display: block;
+  }
+}
+
+[data-expanded]>.\[\[data-expanded\]\>\&\]\:before\:rotate-90::before {
+  content: var(--tw-content);
+  --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));
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 0085be4..ac80cae 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,7 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @import "typography.css";
 @import "highlight.css";
 @import "components/cards.css";
@@ -10,6 +6,10 @@
 @import "components/sidebar.css";
 @import "components/navbar.css";
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html {
   @apply text-base antialiased;
   font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
diff --git a/config.yaml b/config.yaml
new file mode 100644
index 0000000..f398a23
--- /dev/null
+++ b/config.yaml
@@ -0,0 +1,31 @@
+build:
+  buildStats:
+    enable: true
+  cacheBusters:
+  - source: assets/watching/hugo_stats\.json
+    target: styles\.css
+  - source: assets/.*\.(js|ts|jsx|tsx)
+    target: (js|scripts|javascript)
+  - source: assets/.*\.(css|sass|scss)$
+    target: (css|styles|scss|sass)
+  - source: (postcss|tailwind)\.config\.js
+    target: (css|styles|scss|sass)
+  - source: assets/.*\.(.*)$
+    target: $1
+
+module:
+  mounts:
+  - source: static
+    target: static
+  - source: layouts
+    target: layouts
+  - source: data
+    target: data
+  - source: assets
+    target: assets
+  - source: i18n
+    target: i18n
+  - source: archetypes
+    target: archetypes
+  - source: hugo_stats.json
+    target: assets/watching/hugo_stats.json
diff --git a/content/_index.md b/exampleSite/content/_index.md
similarity index 71%
rename from content/_index.md
rename to exampleSite/content/_index.md
index da7bc63..bf9ec71 100644
--- a/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -1,3 +1,4 @@
 ---
 title: Hextra Theme
+toc: false
 ---
diff --git a/content/about/index.md b/exampleSite/content/about/index.md
similarity index 100%
rename from content/about/index.md
rename to exampleSite/content/about/index.md
diff --git a/content/blog/_index.md b/exampleSite/content/blog/_index.md
similarity index 100%
rename from content/blog/_index.md
rename to exampleSite/content/blog/_index.md
diff --git a/content/blog/markdown.md b/exampleSite/content/blog/markdown.md
similarity index 100%
rename from content/blog/markdown.md
rename to exampleSite/content/blog/markdown.md
diff --git a/exampleSite/content/blog/test.md b/exampleSite/content/blog/test.md
new file mode 100644
index 0000000..c79ebc1
--- /dev/null
+++ b/exampleSite/content/blog/test.md
@@ -0,0 +1,5 @@
+---
+title: Test very long title to see how it looks
+---
+
+Hello world!
diff --git a/content/docs/_index.md b/exampleSite/content/docs/_index.md
similarity index 100%
rename from content/docs/_index.md
rename to exampleSite/content/docs/_index.md
diff --git a/content/docs/components/_index.md b/exampleSite/content/docs/components/_index.md
similarity index 100%
rename from content/docs/components/_index.md
rename to exampleSite/content/docs/components/_index.md
diff --git a/content/docs/components/callouts.md b/exampleSite/content/docs/components/callouts.md
similarity index 100%
rename from content/docs/components/callouts.md
rename to exampleSite/content/docs/components/callouts.md
diff --git a/content/docs/components/cards.md b/exampleSite/content/docs/components/cards.md
similarity index 100%
rename from content/docs/components/cards.md
rename to exampleSite/content/docs/components/cards.md
diff --git a/content/docs/components/steps.md b/exampleSite/content/docs/components/steps.md
similarity index 100%
rename from content/docs/components/steps.md
rename to exampleSite/content/docs/components/steps.md
diff --git a/content/docs/components/tabs.md b/exampleSite/content/docs/components/tabs.md
similarity index 100%
rename from content/docs/components/tabs.md
rename to exampleSite/content/docs/components/tabs.md
diff --git a/content/docs/guide/_index.md b/exampleSite/content/docs/guide/_index.md
similarity index 100%
rename from content/docs/guide/_index.md
rename to exampleSite/content/docs/guide/_index.md
diff --git a/content/docs/guide/advanced/_index.md b/exampleSite/content/docs/guide/advanced/_index.md
similarity index 100%
rename from content/docs/guide/advanced/_index.md
rename to exampleSite/content/docs/guide/advanced/_index.md
diff --git a/content/docs/guide/markdown.md b/exampleSite/content/docs/guide/markdown.md
similarity index 100%
rename from content/docs/guide/markdown.md
rename to exampleSite/content/docs/guide/markdown.md
diff --git a/content/docs/guide/organize-files.md b/exampleSite/content/docs/guide/organize-files.md
similarity index 100%
rename from content/docs/guide/organize-files.md
rename to exampleSite/content/docs/guide/organize-files.md
diff --git a/content/docs/introduction.ja.md b/exampleSite/content/docs/introduction.ja.md
similarity index 100%
rename from content/docs/introduction.ja.md
rename to exampleSite/content/docs/introduction.ja.md
diff --git a/content/docs/introduction.md b/exampleSite/content/docs/introduction.md
similarity index 100%
rename from content/docs/introduction.md
rename to exampleSite/content/docs/introduction.md
diff --git a/content/showcase/index.md b/exampleSite/content/showcase/index.md
similarity index 100%
rename from content/showcase/index.md
rename to exampleSite/content/showcase/index.md
diff --git a/exampleSite/go.mod b/exampleSite/go.mod
new file mode 100644
index 0000000..1ef2caa
--- /dev/null
+++ b/exampleSite/go.mod
@@ -0,0 +1,5 @@
+module github.com/imfing/hextra/exampleSite
+
+go 1.20
+
+replace github.com/imfing/hextra => ../
diff --git a/exampleSite/hugo.work b/exampleSite/hugo.work
new file mode 100644
index 0000000..fab7283
--- /dev/null
+++ b/exampleSite/hugo.work
@@ -0,0 +1,3 @@
+go 1.20
+
+use ../
diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml
new file mode 100644
index 0000000..e3fcb6b
--- /dev/null
+++ b/exampleSite/hugo.yaml
@@ -0,0 +1,74 @@
+# Configuration
+baseURL: "https://example.com/"
+title: "Hextra"
+
+enableRobotsTXT: true
+enableGitInfo: true
+# hasCJKLanguage: true
+
+outputs:
+  home: [HTML]
+  page: [HTML]
+  section: [HTML, RSS]
+
+defaultContentLanguage: en
+languages:
+  en:
+    languageName: English
+    weight: 1
+    title: Hextra
+  ja:
+    languageName: 日本語
+    weight: 2
+    title: "Hextra テーマ"
+
+module:
+  hugoVersion:
+    extended: true
+    min: "0.111.0"
+
+  workspace: hugo.work
+  imports:
+    path: github.com/imfing/hextra
+
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+  highlight:
+    noClasses: false
+
+menu:
+  main:
+    - name: Documentation
+      pageRef: /docs
+      weight: 1
+    - name: Blog
+      pageRef: /blog
+      weight: 2
+    - name: About
+      pageRef: /about
+      weight: 3
+    - name: Search
+      weight: 4
+      params:
+        type: search
+        placeholder: Search Hextra docs...
+    - name: GitHub
+      weight: 5
+      url: "https://github.com/imfing/hextra"
+      params:
+        icon: github
+
+  sidebar:
+    - name: More
+      params:
+        type: separator
+      weight: 1
+    - name: "Hugo Docs ↗"
+      url: "https://gohugo.io/documentation/"
+      weight: 2
+
+params:
+  displayUpdatedDate: true
+  dateFormat: "January 2, 2006"
diff --git a/hugo.toml b/hugo.toml
deleted file mode 100644
index 284c2c3..0000000
--- a/hugo.toml
+++ /dev/null
@@ -1,91 +0,0 @@
-# Hugo config
-title = "Hextra Theme"
-
-baseURL = "https://example.org"
-
-disableKinds = ["taxonomy", "term"]
-
-defaultContentLanguage = 'en'
-[languages]
-  [languages.en]
-    languageName = 'English'
-    weight = 1
-    title = 'Hextra Theme'
-  [languages.ja]
-    languageName = '日本語'
-    weight = 2
-    title = 'Hextra テーマ'
-
-[module]
-  [module.hugoVersion]
-    extended = true
-    min      = "0.115.1"
-  [[module.mounts]]
-    source = "assets"
-    target = "assets"
-  [[module.mounts]]
-    source = "static"
-    target = "static"
-  [[module.mounts]]
-    source = "hugo_stats.json"
-    target = "assets/watching/hugo_stats.json"
-
-[build]
-  writeStats = true
-  [[build.cachebusters]]
-    source = "assets/watching/hugo_stats\\.json"
-    target = "styles\\.css"
-  [[build.cachebusters]]
-    source = "(postcss|tailwind)\\.config\\.js"
-    target = "css"
-  [[build.cachebusters]]
-    source = "assets/.*\\.(js|ts|jsx|tsx)"
-    target = "js"
-  [[build.cachebusters]]
-    source = "assets/.*\\.(.*)$"
-    target = "$1"
-
-[markup]
-  [markup.goldmark]
-    [markup.goldmark.renderer]
-      unsafe = true
-  [markup.highlight]
-    noClasses = false
-
-
-[menu]
-  [[menu.main]]
-    name = 'Documentation'
-    pageRef = '/docs'
-    weight = 10
-  [[menu.main]]
-    name = 'Blog'
-    pageRef = '/blog'
-    weight = 20
-  [[menu.main]]
-    name = 'About'
-    pageRef = '/about'
-    weight = 30
-  [[menu.main]]
-    name = 'Search'
-    weight = 35
-    params = { type = 'search', placeholder = 'Search documentation...' }
-  [[menu.main]]
-    name = 'GitHub'
-    url = 'https://github.com'
-    weight = 40
-    params = { icon = 'github' }
-
-  [[menu.sidebar]]
-    name = 'More'
-    params = { type = 'separator' }
-    weight = 10
-  [[menu.sidebar]]
-    name = 'Hugo Docs ↗'
-    url = 'https://gohugo.io/documentation/'
-    weight = 20
-
-[params]
-  dateFormat = 'January 2, 2006'
-
-  displayUpdatedDate = true
diff --git a/hugo_stats.json b/hugo_stats.json
new file mode 100644
index 0000000..fac9aa3
--- /dev/null
+++ b/hugo_stats.json
@@ -0,0 +1,167 @@
+{
+  "htmlElements": {
+    "tags": [
+      "a",
+      "article",
+      "body",
+      "button",
+      "div",
+      "footer",
+      "g",
+      "h1",
+      "h2",
+      "head",
+      "hr",
+      "html",
+      "input",
+      "kbd",
+      "link",
+      "meta",
+      "nav",
+      "p",
+      "path",
+      "script",
+      "span",
+      "style",
+      "svg",
+      "title",
+      "ul"
+    ],
+    "classes": [
+      "-ml-2",
+      "-mr-2",
+      "absolute",
+      "active:bg-gray-400/20",
+      "appearance-none",
+      "bg-black/[.05]",
+      "bg-gray-100",
+      "bg-transparent",
+      "bg-white",
+      "block",
+      "border",
+      "border-gray-200",
+      "container",
+      "contrast-more:border",
+      "contrast-more:border-current",
+      "contrast-more:border-gray-900",
+      "contrast-more:dark:border-current",
+      "contrast-more:dark:border-gray-50",
+      "contrast-more:dark:shadow-[0_0_0_1px_#fff]",
+      "contrast-more:dark:text-gray-100",
+      "contrast-more:dark:text-gray-300",
+      "contrast-more:shadow-[0_0_0_1px_#000]",
+      "contrast-more:text-current",
+      "contrast-more:text-gray-700",
+      "contrast-more:text-gray-800",
+      "dark:bg-dark",
+      "dark:bg-dark/50",
+      "dark:bg-gray-50/10",
+      "dark:bg-neutral-900",
+      "dark:border-gray-100/20",
+      "dark:border-neutral-800",
+      "dark:focus:bg-dark",
+      "dark:hover:text-gray-200",
+      "dark:placeholder:text-gray-400",
+      "dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]",
+      "dark:text-gray-300",
+      "dark:text-gray-400",
+      "flex",
+      "flex-col",
+      "focus:bg-white",
+      "font-extrabold",
+      "font-medium",
+      "font-mono",
+      "gap-1",
+      "gap-2",
+      "h-16",
+      "h-5",
+      "h-full",
+      "hamburger-menu",
+      "hidden",
+      "hover:opacity-75",
+      "hover:text-gray-800",
+      "inset-x-0",
+      "items-center",
+      "justify-center",
+      "justify-end",
+      "leading-tight",
+      "lg:mx-auto",
+      "lg:prose-xl",
+      "ltr:md:left-auto",
+      "ltr:mr-auto",
+      "ltr:right-1.5",
+      "max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]",
+      "max-w-[90rem]",
+      "max-w-[min(calc(100vw-2rem),calc(100%+20rem))]",
+      "md:hidden",
+      "md:inline",
+      "md:inline-block",
+      "md:justify-start",
+      "md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]",
+      "md:text-sm",
+      "md:w-64",
+      "min-h-[100px]",
+      "mt-2",
+      "mt-6",
+      "mx-2",
+      "mx-auto",
+      "my-1.5",
+      "next-error-h1",
+      "overflow-auto",
+      "overscroll-contain",
+      "p-2",
+      "pb-[env(safe-area-inset-bottom)]",
+      "pl-[max(env(safe-area-inset-left),1.5rem)]",
+      "placeholder:text-gray-500",
+      "pointer-events-none",
+      "pr-[max(env(safe-area-inset-right),1.5rem)]",
+      "print:bg-transparent",
+      "print:hidden",
+      "prose",
+      "px-1.5",
+      "px-3",
+      "px-4",
+      "px-6",
+      "py-12",
+      "py-2",
+      "py-2.5",
+      "relative",
+      "rounded",
+      "rounded-lg",
+      "rounded-xl",
+      "rtl:left-1.5",
+      "rtl:md:right-auto",
+      "rtl:ml-auto",
+      "search-input",
+      "search-results",
+      "search-wrapper",
+      "select-none",
+      "shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)]",
+      "shadow-xl",
+      "sm:flex",
+      "sm:items-start",
+      "sr-only",
+      "sticky",
+      "text-[10px]",
+      "text-base",
+      "text-center",
+      "text-current",
+      "text-gray-100",
+      "text-gray-500",
+      "text-gray-600",
+      "text-gray-900",
+      "text-sm",
+      "text-xs",
+      "top-0",
+      "top-full",
+      "transition-colors",
+      "transition-opacity",
+      "w-full",
+      "w-screen",
+      "whitespace-nowrap",
+      "z-20",
+      "z-[-1]"
+    ],
+    "ids": null
+  }
+}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index ec1f573..f84a676 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,8 +1,14 @@
 {{ define "main" }}
-  <div class="container px-4 lg:mx-auto">
-    <article class="prose lg:prose-xl">
-      <h1>{{ .Title }}</h1>
-      {{ .Content }}
+  <div class="mx-auto flex max-w-[90rem]">
+    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
+    {{ partial "toc.html" . }}
+    <article class="w-full break-words flex min-h-[calc(100vh-4rem)] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
+        <div class="content">
+          <h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
+          {{ .Content }}
+        </div>
+      </main>
     </article>
   </div>
 {{ end }}
diff --git a/layouts/partials/components/last-updated.html b/layouts/partials/components/last-updated.html
index d90e4aa..8c85236 100644
--- a/layouts/partials/components/last-updated.html
+++ b/layouts/partials/components/last-updated.html
@@ -2,6 +2,8 @@
   {{- with .Lastmod -}}
     {{ $datetime := (time.Format "2006-01-02T15:04:05.000Z" .) }}
     <div class="mt-12 mb-8 block text-xs text-gray-500 ltr:text-right rtl:text-left dark:text-gray-400">Last updated on <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
+  {{- else -}}
+    <div class="mt-16"></div>
   {{- end -}}
 {{ else }}
   <div class="mt-16"></div>
diff --git a/layouts/partials/head-css.html b/layouts/partials/head-css.html
index 8f33cc4..f5db357 100644
--- a/layouts/partials/head-css.html
+++ b/layouts/partials/head-css.html
@@ -1,9 +1,9 @@
-{{ $options := dict "inlineImports" true }}
-{{ $styles := resources.Get "css/styles.css" }}
-{{ $styles = $styles | resources.PostCSS $options }}
-{{ if not hugo.IsProduction }}
+{{ if and (not hugo.IsProduction) (eq hugo.Environment "theme")}}
+  {{ $styles := resources.Get "css/styles.css" }}
+  {{ $styles = $styles | resources.PostCSS (dict "inlineImports" true) }}
   <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
 {{ else }}
+  {{ $styles := resources.Get "css/compiled/main.css" }}
   {{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
   <link rel="preload" href="{{ $styles.RelPermalink }}" as="style" />
   <link href="{{ $styles.RelPermalink }}" rel="stylesheet" integrity="{{ $styles.Data.integrity }}" />
diff --git a/package-lock.json b/package-lock.json
index 4be67e1..87bf202 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,12 +5,11 @@
   "packages": {
     "": {
       "devDependencies": {
-        "@tailwindcss/typography": "^0.5.9",
+        "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.23",
         "postcss-cli": "^10.1.0",
         "postcss-import": "^15.1.0",
-        "postcss-nested": "^6.0.1",
         "prettier": "^2.8.8",
         "prettier-plugin-go-template": "^0.0.13",
         "tailwindcss": "^3.3.2"
@@ -117,19 +116,35 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@tailwindcss/typography": {
-      "version": "0.5.9",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
-      "integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==",
+    "node_modules/@tailwindcss/nesting": {
+      "version": "0.0.0-insiders.565cd3e",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/nesting/-/nesting-0.0.0-insiders.565cd3e.tgz",
+      "integrity": "sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==",
       "dev": true,
       "dependencies": {
-        "lodash.castarray": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.merge": "^4.6.2",
-        "postcss-selector-parser": "6.0.10"
+        "postcss-nested": "^5.0.5"
       },
       "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders"
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/@tailwindcss/nesting/node_modules/postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.6"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
       }
     },
     "node_modules/ansi-regex": {
@@ -768,24 +783,6 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
-    "node_modules/lodash.castarray": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
-      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
-      "dev": true
-    },
-    "node_modules/lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "dev": true
-    },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
diff --git a/package.json b/package.json
index f336052..1a7efcb 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,10 @@
 {
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.23",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
-    "postcss-nested": "^6.0.1",
     "prettier": "^2.8.8",
     "prettier-plugin-go-template": "^0.0.13",
     "tailwindcss": "^3.3.2"
diff --git a/postcss.config.js b/postcss.config.js
index 6cc68c7..98796a1 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,8 +1,12 @@
 let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';
 const tailwind = require('tailwindcss')(tailwindConfig);
 const autoprefixer = require('autoprefixer');
-const nested = require('postcss-nested')
 
 module.exports = {
-	plugins: [tailwind, nested, ...(process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : [])], // add nesting to the plugins array
+	plugins: [
+		require('postcss-import'),
+		require('@tailwindcss/nesting'),
+		tailwind,
+		...(process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : [])
+	],
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 30346c0..0fd84b2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,8 +9,13 @@ const makePrimaryColor =
       return `hsl(var(--primary-hue) 100% ${l}% / ${opacityValue})`
     }
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./hugo_stats.json'],
+  content: [
+    "./layouts/**/*.html",
+    "./content/**/*.{html,md}",
+    './hugo_stats.json'
+  ],
   theme: {
     screens: {
       sm: '640px',
diff --git a/taskfile.yaml b/taskfile.yaml
index b98f1bc..3d915fa 100644
--- a/taskfile.yaml
+++ b/taskfile.yaml
@@ -1,11 +1,19 @@
-version: '3'
+version: "3"
 
 tasks:
-
-  serve:
+  dev:
     cmds:
-      - hugo server --enableGitInfo --buildDrafts --buildExpired --buildFuture -p 1313
+      - hugo server --debug --enableGitInfo --source=exampleSite --themesDir=../.. --environment=theme --disableFastRender --buildDrafts --port 1313
 
   build:
+    deps: [css]
     cmds:
-      - hugo --minify
+      - hugo --minify --source=exampleSite --themesDir=../..
+
+  css:
+    cmds:
+      - npx postcss --config postcss.config.js --env production assets/css/styles.css -o assets/css/compiled/main.css
+
+  clean:
+    cmds:
+      - rm -rf public resources