@font-face {
  font-family: "iA Writer Quattro";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/ia-writer-quattro.woff2") format("woff2"); }

@font-face {
  font-family: "Noto Serif Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/noto-serif.woff2") format("woff2-variations"); }

@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono.woff2") format("woff2-variations"); }

:root {
  --font-sans: "iA Writer Quattro", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Noto Serif Variable", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
  --content-width: 75%;
  --content-max: 60rem;
  --ui-primary: #559ff4;
  --ui-text: #334155;
  --ui-text-muted: #64748b;
  --ui-text-dimmed: #94a3b8;
  --ui-text-highlighted: #0f172a;
  --ui-bg: #ffffff;
  --ui-bg-elevated: #fafafa;
  --ui-bg-muted: #f8fafc;
  --ui-border: #e2e8f0;
  --code-border: var(--ui-border);
  --code-background: var(--ui-bg-elevated);
  --code-foreground: var(--ui-text);
  --code-line-highlight: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-bg-elevated));
  --prose-body: #334155;
  --prose-links: var(--ui-primary);
  --prose-bold: var(--ui-text-highlighted); }

.dark {
  --ui-primary: #7db9ff;
  --ui-text: #e5e5e5;
  --ui-text-muted: #a3a3a3;
  --ui-text-dimmed: #737373;
  --ui-text-highlighted: #ffffff;
  --ui-bg: #0a0a0a;
  --ui-bg-elevated: #171717;
  --ui-bg-muted: #171717;
  --ui-border: #262626;
  --code-background: #0d1117;
  --code-foreground: #c9d1d9;
  --prose-body: #e5e5e5;
  --code-line-highlight: color-mix(in srgb, var(--ui-primary) 18%, #0d1117); }

*,
*::before,
*::after {
  box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none; }

body {
  margin: 0;
  font-family: inherit; }

img,
svg {
  display: block;
  max-width: 100%; }

button {
  font: inherit;
  color: inherit; }

a {
  color: inherit; }

ul,
ol {
  margin: 0;
  padding: 0; }

body.tempest-body {
  font-family: inherit;
  font-weight: 400;
  color: var(--ui-text);
  background-color: var(--ui-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  line-height: 1.75; }
  body.tempest-body::selection {
    background-color: color-mix(in srgb, var(--ui-primary) 20%, transparent);
    color: var(--ui-primary); }

.tempest-noise {
  position: absolute;
  inset: 0;
  background-image: url("/noise.svg");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0; }

.tempest-hide-sm {
  display: none; }
  @media (min-width: 40rem) {
    .tempest-hide-sm {
      display: block; } }
.tempest-hide-md {
  display: none; }
  @media (min-width: 48rem) {
    .tempest-hide-md {
      display: flex; } }
.tempest-show-md {
  display: flex; }
  @media (min-width: 48rem) {
    .tempest-show-md {
      display: none; } }
.tempest-main {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
  max-width: 80rem; }
  @media (min-width: 80rem) {
    .tempest-main {
      padding: 0 2rem; } }
.tempest-content, .tempest-article {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  flex-grow: 1;
  padding: 0 0.5rem; }
  @media (min-width: 64rem) {
    .tempest-content, .tempest-article {
      margin-top: 2.5rem; } }
  .tempest-content--wide {
    max-width: none; }

.tempest-article {
  width: 100%;
  max-width: var(--content-max); }
  @media (min-width: 48rem) {
    .tempest-article {
      width: var(--content-width); } }
.tempest-page-header,
.tempest-post-header {
  display: flex;
  flex-direction: column;
  padding-bottom: 1.5rem;
  width: 100%; }
  .tempest-page-header h1,
  .tempest-post-header h1 {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--ui-text-highlighted);
    margin: 0; }

.tempest-subtitle,
.tempest-description {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--ui-text-muted);
  line-height: 1.6; }

.tempest-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-text-dimmed); }
  .tempest-breadcrumb a {
    text-decoration: none;
    transition: color 0.15s; }
    .tempest-breadcrumb a:hover {
      color: var(--ui-text); }
  .tempest-breadcrumb .current {
    color: var(--ui-primary); }
  .tempest-breadcrumb svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.25rem;
    flex-shrink: 0; }

.tempest-post-meta {
  border-bottom: 1px solid var(--ui-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--ui-text-dimmed); }
  .tempest-post-meta .author-name,
  .tempest-post-meta .post-date {
    color: var(--ui-text-muted); }

.tempest-intro {
  width: 100%;
  margin-bottom: 2rem; }
  .tempest-intro h2 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ui-text-highlighted);
    font-size: 1.5rem;
    margin-bottom: 1rem; }
  .tempest-intro p {
    color: var(--ui-text-muted);
    line-height: 1.75; }

.tempest-taxonomy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0; }

.tempest-taxonomy-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--ui-bg-elevated) 50%, transparent);
  color: var(--ui-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
  .tempest-taxonomy-link:hover {
    color: var(--ui-primary);
    border-color: var(--ui-primary);
    background: color-mix(in srgb, var(--ui-primary) 8%, transparent);
    text-decoration: none; }

.tempest-empty {
  color: var(--ui-text-dimmed);
  font-size: 1rem;
  text-align: center;
  padding: 3rem 0; }

.tempest-comments {
  width: 100%;
  margin-top: 2rem;
  padding-bottom: 2rem; }

.tempest-header-wrap {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 100%; }

.tempest-header {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  border-bottom: 1px solid var(--ui-border);
  background-color: var(--ui-bg); }

.tempest-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  width: 100%;
  max-width: 80rem; }
  @media (max-width: 47.99rem) {
    .tempest-header-inner {
      grid-template-columns: 1fr auto;
      padding: 0.75rem 1.25rem; } }
.tempest-header-left {
  justify-self: start;
  min-width: 0; }

.tempest-header-center {
  justify-self: center;
  min-width: 0;
  width: 100%;
  max-width: 20rem; }
  @media (max-width: 39.99rem) {
    .tempest-header-center {
      display: none; } }
.tempest-header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0; }

.tempest-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  color: var(--ui-text);
  text-decoration: none;
  white-space: nowrap; }
  .tempest-brand:hover {
    color: var(--ui-text-highlighted);
    text-decoration: none; }

.tempest-logo-img {
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  object-fit: cover;
  flex-shrink: 0; }

.tempest-brand-name {
  display: none;
  font-weight: 400; }
  @media (min-width: 64rem) {
    .tempest-brand-name {
      display: inline; } }
@media (max-width: 47.99rem) {
  .tempest-nav {
    display: none; } }

.tempest-nav ul {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  color: var(--ui-text-muted);
  list-style: none;
  margin: 0;
  padding: 0; }

.tempest-nav a {
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap; }
  .tempest-nav a:hover {
    color: var(--ui-text-highlighted); }
  .tempest-nav a.active {
    color: var(--ui-primary); }

.tempest-search-btn {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  min-width: 0;
  font-family: var(--font-sans); }

.tempest-search-pill {
  display: flex;
  align-items: center;
  border-radius: 0.75rem;
  background-color: color-mix(in srgb, var(--ui-bg) 50%, transparent);
  color: var(--ui-text);
  transition: background-color 0.15s;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-border) 80%, transparent);
  width: 100%;
  min-width: 12rem; }
  .dark .tempest-search-pill {
    background-color: transparent; }
  .tempest-search-pill:hover {
    background-color: var(--ui-bg-elevated); }
  .tempest-search-pill > span {
    flex: 1;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .tempest-search-pill kbd {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0 0.5rem;
    margin: 0.375rem 0.375rem 0.375rem 0;
    border-radius: 0.25rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ui-text-dimmed);
    background: transparent;
    border: none; }
    .tempest-search-pill kbd svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0; }

.tempest-nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.25rem;
  color: var(--ui-text-muted);
  cursor: pointer;
  flex-shrink: 0; }
  .tempest-nav-toggle:hover {
    color: var(--ui-primary); }
  @media (max-width: 47.99rem) {
    .tempest-nav-toggle {
      display: flex;
      align-items: center;
      justify-content: center; } }
.tempest-mobile-nav {
  display: none;
  background-color: var(--ui-bg);
  border-bottom: 1px solid var(--ui-border);
  padding: 1rem 1.25rem; }
  .tempest-mobile-nav.open {
    display: block; }
  @media (min-width: 48rem) {
    .tempest-mobile-nav {
      display: none !important; } }
  .tempest-mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    .tempest-mobile-nav ul li {
      margin-bottom: 0.75rem; }
    .tempest-mobile-nav ul a,
    .tempest-mobile-nav ul button {
      font-family: var(--font-sans);
      color: var(--ui-text-muted);
      font-weight: 400;
      font-size: 1rem;
      text-decoration: none;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer; }
      .tempest-mobile-nav ul a:hover, .tempest-mobile-nav ul a.active,
      .tempest-mobile-nav ul button:hover,
      .tempest-mobile-nav ul button.active {
        color: var(--ui-primary); }

.tempest-prose,
.content.tempest-prose {
  margin-top: 1.5rem;
  padding-bottom: 6rem;
  width: 100%;
  max-width: none;
  color: var(--prose-body);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.75; }
  .tempest-prose > :first-child,
  .content.tempest-prose > :first-child {
    margin-top: 0; }
  .tempest-prose p,
  .content.tempest-prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    color: inherit; }
  .tempest-prose :is(h1, h2, h3, h4, h5, h6) + p,
  .content.tempest-prose :is(h1, h2, h3, h4, h5, h6) + p {
    margin-top: 0.75em; }
  .tempest-prose h1, .tempest-prose h2, .tempest-prose h3, .tempest-prose h4, .tempest-prose h5, .tempest-prose h6,
  .content.tempest-prose h1,
  .content.tempest-prose h2,
  .content.tempest-prose h3,
  .content.tempest-prose h4,
  .content.tempest-prose h5,
  .content.tempest-prose h6 {
    font-weight: 400;
    color: var(--ui-text-highlighted);
    line-height: 1.35;
    scroll-margin-top: 1.5rem;
    margin-top: 2.25em;
    margin-bottom: 0.65em; }
  .tempest-prose :is(h2, h3, h4, h5, h6) + :is(h3, h4, h5, h6),
  .content.tempest-prose :is(h2, h3, h4, h5, h6) + :is(h3, h4, h5, h6) {
    margin-top: 1.25em; }
  .tempest-prose h1,
  .content.tempest-prose h1 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -0.02em; }
  .tempest-prose h2,
  .content.tempest-prose h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -0.02em; }
  .tempest-prose h3,
  .content.tempest-prose h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-top: 2em; }
  .tempest-prose h4,
  .content.tempest-prose h4 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    margin-top: 1.75em; }
  .tempest-prose h5,
  .content.tempest-prose h5 {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    margin-top: 1.5em;
    color: var(--ui-text); }
  .tempest-prose h6,
  .content.tempest-prose h6 {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 1.25em;
    color: var(--ui-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase; }
  .tempest-prose a,
  .content.tempest-prose a {
    color: var(--prose-links);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--ui-primary); }
    .tempest-prose a:hover,
    .content.tempest-prose a:hover {
      text-decoration: none;
      color: var(--ui-primary); }
  .tempest-prose strong,
  .content.tempest-prose strong {
    font-weight: 600;
    color: var(--prose-bold); }
  .tempest-prose blockquote,
  .content.tempest-prose blockquote {
    font-weight: 400;
    color: var(--ui-text);
    border-left: 2px solid var(--ui-border);
    margin: 2em 0;
    padding-left: 1.5rem;
    background: transparent; }
    .tempest-prose blockquote p,
    .content.tempest-prose blockquote p {
      font-size: 1rem !important; }
  .tempest-prose ul, .tempest-prose ol,
  .content.tempest-prose ul,
  .content.tempest-prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
    list-style-position: outside; }
    .tempest-prose ul li, .tempest-prose ol li,
    .content.tempest-prose ul li,
    .content.tempest-prose ol li {
      margin-bottom: 0.5em; }
  .tempest-prose ul,
  .content.tempest-prose ul {
    list-style-type: disc; }
  .tempest-prose ol,
  .content.tempest-prose ol {
    list-style-type: decimal; }
  .tempest-prose table,
  .content.tempest-prose table {
    width: 100%;
    margin: 1.71em 0;
    border-collapse: collapse;
    font-size: 0.875em;
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
    overflow: hidden; }
  .tempest-prose thead,
  .content.tempest-prose thead {
    background-color: var(--ui-bg-elevated); }
  .tempest-prose th, .tempest-prose td,
  .content.tempest-prose th,
  .content.tempest-prose td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--ui-border);
    text-align: left;
    vertical-align: top; }
  .tempest-prose th,
  .content.tempest-prose th {
    font-weight: 600;
    color: var(--ui-text-highlighted); }
  .tempest-prose img,
  .content.tempest-prose img {
    border-radius: 0.5rem;
    max-width: 100%;
    height: auto; }
  .tempest-prose hr,
  .content.tempest-prose hr {
    border: none;
    border-top: 1px solid var(--ui-border);
    margin: 3rem 0; }

.tempest-prose .highlight .bg {
  background-color: #ffffff; }

.tempest-prose .highlight .chroma {
  background-color: #ffffff; }

.tempest-prose .highlight .chroma .err {
  color: #a61717;
  background-color: #e3d2d2; }

.tempest-prose .highlight .chroma .lnlinks {
  outline: none;
  text-decoration: none;
  color: inherit; }

.tempest-prose .highlight .chroma .lntd {
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0; }

.tempest-prose .highlight .chroma .lntable {
  border-spacing: 0;
  padding: 0;
  margin: 0;
  border: 0; }

.tempest-prose .highlight .chroma .hl {
  background-color: color-mix(in srgb, var(--ui-primary) 10%, var(--code-background)); }

.tempest-prose .highlight .chroma .lnt {
  white-space: pre;
  user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #7f7f7f; }

.tempest-prose .highlight .chroma .ln {
  white-space: pre;
  user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #7f7f7f; }

.tempest-prose .highlight .chroma .line {
  display: flex; }

.tempest-prose .highlight .chroma .k {
  color: #000000;
  font-weight: bold; }

.tempest-prose .highlight .chroma .kc {
  color: #000000;
  font-weight: bold; }

.tempest-prose .highlight .chroma .kd {
  color: #000000;
  font-weight: bold; }

.tempest-prose .highlight .chroma .kn {
  color: #000000;
  font-weight: bold; }

.tempest-prose .highlight .chroma .kp {
  color: #000000;
  font-weight: bold; }

.tempest-prose .highlight .chroma .kr {
  color: #000000;
  font-weight: bold; }

.tempest-prose .highlight .chroma .kt {
  color: #445588;
  font-weight: bold; }

.tempest-prose .highlight .chroma .na {
  color: #008080; }

.tempest-prose .highlight .chroma .nb {
  color: #0086b3; }

.tempest-prose .highlight .chroma .bp {
  color: #999999; }

.tempest-prose .highlight .chroma .nc {
  color: #445588;
  font-weight: bold; }

.tempest-prose .highlight .chroma .no {
  color: #008080; }

.tempest-prose .highlight .chroma .nd {
  color: #3c5d5d;
  font-weight: bold; }

.tempest-prose .highlight .chroma .ni {
  color: #800080; }

.tempest-prose .highlight .chroma .ne {
  color: #990000;
  font-weight: bold; }

.tempest-prose .highlight .chroma .nf {
  color: #990000;
  font-weight: bold; }

.tempest-prose .highlight .chroma .nl {
  color: #990000;
  font-weight: bold; }

.tempest-prose .highlight .chroma .nn {
  color: #555555; }

.tempest-prose .highlight .chroma .nt {
  color: #000080; }

.tempest-prose .highlight .chroma .nv {
  color: #008080; }

.tempest-prose .highlight .chroma .vc {
  color: #008080; }

.tempest-prose .highlight .chroma .vg {
  color: #008080; }

.tempest-prose .highlight .chroma .vi {
  color: #008080; }

.tempest-prose .highlight .chroma .s {
  color: #dd1144; }

.tempest-prose .highlight .chroma .sa {
  color: #dd1144; }

.tempest-prose .highlight .chroma .sb {
  color: #dd1144; }

.tempest-prose .highlight .chroma .sc {
  color: #dd1144; }

.tempest-prose .highlight .chroma .dl {
  color: #dd1144; }

.tempest-prose .highlight .chroma .sd {
  color: #dd1144; }

.tempest-prose .highlight .chroma .s2 {
  color: #dd1144; }

.tempest-prose .highlight .chroma .se {
  color: #dd1144; }

.tempest-prose .highlight .chroma .sh {
  color: #dd1144; }

.tempest-prose .highlight .chroma .si {
  color: #dd1144; }

.tempest-prose .highlight .chroma .sx {
  color: #dd1144; }

.tempest-prose .highlight .chroma .sr {
  color: #009926; }

.tempest-prose .highlight .chroma .s1 {
  color: #dd1144; }

.tempest-prose .highlight .chroma .ss {
  color: #990073; }

.tempest-prose .highlight .chroma .m {
  color: #009999; }

.tempest-prose .highlight .chroma .mb {
  color: #009999; }

.tempest-prose .highlight .chroma .mf {
  color: #009999; }

.tempest-prose .highlight .chroma .mh {
  color: #009999; }

.tempest-prose .highlight .chroma .mi {
  color: #009999; }

.tempest-prose .highlight .chroma .il {
  color: #009999; }

.tempest-prose .highlight .chroma .mo {
  color: #009999; }

.tempest-prose .highlight .chroma .o {
  color: #000000;
  font-weight: bold; }

.tempest-prose .highlight .chroma .ow {
  color: #000000;
  font-weight: bold; }

.tempest-prose .highlight .chroma .c {
  color: #999988;
  font-style: italic; }

.tempest-prose .highlight .chroma .ch {
  color: #999988;
  font-style: italic; }

.tempest-prose .highlight .chroma .cm {
  color: #999988;
  font-style: italic; }

.tempest-prose .highlight .chroma .c1 {
  color: #999988;
  font-style: italic; }

.tempest-prose .highlight .chroma .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic; }

.tempest-prose .highlight .chroma .cp {
  color: #999999;
  font-weight: bold;
  font-style: italic; }

.tempest-prose .highlight .chroma .cpf {
  color: #999999;
  font-weight: bold;
  font-style: italic; }

.tempest-prose .highlight .chroma .gd {
  color: #000000;
  background-color: #ffdddd; }

.tempest-prose .highlight .chroma .ge {
  color: #000000;
  font-style: italic; }

.tempest-prose .highlight .chroma .gr {
  color: #aa0000; }

.tempest-prose .highlight .chroma .gh {
  color: #999999; }

.tempest-prose .highlight .chroma .gi {
  color: #000000;
  background-color: #ddffdd; }

.tempest-prose .highlight .chroma .go {
  color: #888888; }

.tempest-prose .highlight .chroma .gp {
  color: #555555; }

.tempest-prose .highlight .chroma .gs {
  font-weight: bold; }

.tempest-prose .highlight .chroma .gu {
  color: #aaaaaa; }

.tempest-prose .highlight .chroma .gt {
  color: #aa0000; }

.tempest-prose .highlight .chroma .gl {
  text-decoration: underline; }

.tempest-prose .highlight .chroma .w {
  color: #bbbbbb; }

.dark .tempest-prose .highlight .bg {
  color: #c9d1d9;
  background-color: #0d1117; }

.dark .tempest-prose .highlight .chroma {
  color: #c9d1d9;
  background-color: #0d1117; }

.dark .tempest-prose .highlight .chroma .err {
  color: #f85149; }

.dark .tempest-prose .highlight .chroma .lnlinks {
  outline: none;
  text-decoration: none;
  color: inherit; }

.dark .tempest-prose .highlight .chroma .lntd {
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0; }

.dark .tempest-prose .highlight .chroma .lntable {
  border-spacing: 0;
  padding: 0;
  margin: 0;
  border: 0; }

.dark .tempest-prose .highlight .chroma .hl {
  background-color: var(--code-line-highlight); }

.dark .tempest-prose .highlight .chroma .lnt {
  white-space: pre;
  user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #64686c; }

.dark .tempest-prose .highlight .chroma .ln {
  white-space: pre;
  user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #6e7681; }

.dark .tempest-prose .highlight .chroma .line {
  display: flex; }

.dark .tempest-prose .highlight .chroma .k {
  color: #ff7b72; }

.dark .tempest-prose .highlight .chroma .kc {
  color: #79c0ff; }

.dark .tempest-prose .highlight .chroma .kd {
  color: #ff7b72; }

.dark .tempest-prose .highlight .chroma .kn {
  color: #ff7b72; }

.dark .tempest-prose .highlight .chroma .kp {
  color: #79c0ff; }

.dark .tempest-prose .highlight .chroma .kr {
  color: #ff7b72; }

.dark .tempest-prose .highlight .chroma .kt {
  color: #ff7b72; }

.dark .tempest-prose .highlight .chroma .nc {
  color: #f0883e;
  font-weight: bold; }

.dark .tempest-prose .highlight .chroma .no {
  color: #79c0ff;
  font-weight: bold; }

.dark .tempest-prose .highlight .chroma .nd {
  color: #d2a8ff;
  font-weight: bold; }

.dark .tempest-prose .highlight .chroma .ni {
  color: #ffa657; }

.dark .tempest-prose .highlight .chroma .ne {
  color: #f0883e;
  font-weight: bold; }

.dark .tempest-prose .highlight .chroma .nf {
  color: #d2a8ff;
  font-weight: bold; }

.dark .tempest-prose .highlight .chroma .nl {
  color: #79c0ff;
  font-weight: bold; }

.dark .tempest-prose .highlight .chroma .nn {
  color: #ff7b72; }

.dark .tempest-prose .highlight .chroma .py {
  color: #79c0ff; }

.dark .tempest-prose .highlight .chroma .nt {
  color: #7ee787; }

.dark .tempest-prose .highlight .chroma .nv {
  color: #79c0ff; }

.dark .tempest-prose .highlight .chroma .l {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .ld {
  color: #79c0ff; }

.dark .tempest-prose .highlight .chroma .s {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .sa {
  color: #79c0ff; }

.dark .tempest-prose .highlight .chroma .sb {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .sc {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .dl {
  color: #79c0ff; }

.dark .tempest-prose .highlight .chroma .sd {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .s2 {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .se {
  color: #79c0ff; }

.dark .tempest-prose .highlight .chroma .sh {
  color: #79c0ff; }

.dark .tempest-prose .highlight .chroma .si {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .sx {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .sr {
  color: #79c0ff; }

.dark .tempest-prose .highlight .chroma .s1 {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .ss {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .m {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .mb {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .mf {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .mh {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .mi {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .il {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .mo {
  color: #a5d6ff; }

.dark .tempest-prose .highlight .chroma .o {
  color: #ff7b72;
  font-weight: bold; }

.dark .tempest-prose .highlight .chroma .ow {
  color: #ff7b72;
  font-weight: bold; }

.dark .tempest-prose .highlight .chroma .c {
  color: #8b949e;
  font-style: italic; }

.dark .tempest-prose .highlight .chroma .ch {
  color: #8b949e;
  font-style: italic; }

.dark .tempest-prose .highlight .chroma .cm {
  color: #8b949e;
  font-style: italic; }

.dark .tempest-prose .highlight .chroma .c1 {
  color: #8b949e;
  font-style: italic; }

.dark .tempest-prose .highlight .chroma .cs {
  color: #8b949e;
  font-weight: bold;
  font-style: italic; }

.dark .tempest-prose .highlight .chroma .cp {
  color: #8b949e;
  font-weight: bold;
  font-style: italic; }

.dark .tempest-prose .highlight .chroma .cpf {
  color: #8b949e;
  font-weight: bold;
  font-style: italic; }

.dark .tempest-prose .highlight .chroma .gd {
  color: #ffa198;
  background-color: #490202; }

.dark .tempest-prose .highlight .chroma .ge {
  font-style: italic; }

.dark .tempest-prose .highlight .chroma .gr {
  color: #ffa198; }

.dark .tempest-prose .highlight .chroma .gh {
  color: #79c0ff;
  font-weight: bold; }

.dark .tempest-prose .highlight .chroma .gi {
  color: #56d364;
  background-color: #0f5323; }

.dark .tempest-prose .highlight .chroma .go {
  color: #8b949e; }

.dark .tempest-prose .highlight .chroma .gp {
  color: #8b949e; }

.dark .tempest-prose .highlight .chroma .gs {
  font-weight: bold; }

.dark .tempest-prose .highlight .chroma .gu {
  color: #79c0ff; }

.dark .tempest-prose .highlight .chroma .gt {
  color: #ff7b72; }

.dark .tempest-prose .highlight .chroma .gl {
  text-decoration: underline; }

.dark .tempest-prose .highlight .chroma .w {
  color: #6e7681; }

.tempest-prose :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid var(--ui-border);
  background-color: var(--ui-bg-muted);
  padding: 0.125rem 0.375rem;
  color: inherit; }
  .tempest-prose :not(pre) > code::before, .tempest-prose :not(pre) > code::after {
    content: none; }

.tempest-prose .highlight {
  margin: 1.71em 0;
  border-radius: 0.5rem;
  border: 1px solid var(--code-border);
  overflow: hidden;
  background-color: var(--code-background);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.65;
  tab-size: 2; }
  .tempest-prose .highlight pre {
    margin: 0;
    padding: 1rem;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    overflow-x: auto;
    white-space: pre;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    tab-size: inherit; }
  .tempest-prose .highlight code {
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    border: none;
    background: transparent;
    padding: 0;
    color: inherit;
    white-space: pre;
    display: block; }
    .tempest-prose .highlight code::before, .tempest-prose .highlight code::after {
      content: none; }
  .tempest-prose .highlight .chroma {
    background: transparent !important;
    color: var(--code-foreground); }
  .tempest-prose .highlight .line {
    display: flex; }
  .tempest-prose .highlight .ln {
    min-width: 2.5rem;
    padding-right: 1rem;
    text-align: right;
    color: var(--ui-text-dimmed) !important;
    user-select: none;
    flex-shrink: 0; }
  .tempest-prose .highlight .cl {
    flex: 1;
    min-width: 0; }
  .tempest-prose .highlight .line.hl {
    background-color: var(--code-line-highlight); }

.dark .tempest-prose .highlight {
  background-color: var(--code-background);
  border-color: #30363d; }
  .dark .tempest-prose .highlight .chroma {
    background: transparent !important;
    color: var(--code-foreground) !important; }
  .dark .tempest-prose .highlight .line.hl {
    background-color: var(--code-line-highlight); }

.tempest-blog-grid {
  display: grid;
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  width: 100%; }
  @media (min-width: 48rem) {
    .tempest-blog-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem; } }
  @media (min-width: 64rem) {
    .tempest-blog-grid {
      grid-template-columns: repeat(3, 1fr);
      margin-top: 1rem; } }
.tempest-blog-card {
  position: relative;
  padding: 2px;
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--ui-bg-elevated) 30%, transparent);
  transition: background-color 0.15s; }
  .tempest-blog-card:hover {
    background-color: color-mix(in srgb, var(--ui-bg-elevated) 75%, transparent); }

.tempest-blog-card-link {
  position: absolute;
  inset: 0;
  z-index: 1; }

.tempest-blog-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  border: 1px dashed var(--ui-border);
  border-radius: 0.375rem;
  padding: 1rem; }

.tempest-blog-card-date {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ui-text-dimmed);
  letter-spacing: 0.01em; }

.tempest-blog-card-body {
  flex: 1;
  min-height: 0; }

.tempest-blog-card-title {
  display: block;
  font-weight: 500;
  color: var(--ui-text-highlighted);
  line-height: 1.4; }

.tempest-blog-card-desc {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--ui-text-dimmed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; }

.tempest-rss-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: color-mix(in srgb, #d1d5db 20%, transparent);
  color: #374151;
  text-decoration: none;
  transition: color 0.15s; }
  .dark .tempest-rss-badge {
    background-color: color-mix(in srgb, #9ca3af 10%, transparent);
    color: #9ca3af; }
  .tempest-rss-badge:hover {
    color: var(--ui-primary);
    text-decoration: none; }
  .tempest-rss-badge svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0; }

.tempest-pagination {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin: 2rem 0 4rem;
  list-style: none;
  padding: 0; }
  .tempest-pagination a, .tempest-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--ui-text-muted);
    text-decoration: none;
    border: 1px solid var(--ui-border);
    background: var(--ui-bg-elevated);
    transition: color 0.15s, border-color 0.15s; }
  .tempest-pagination a:hover {
    color: var(--ui-primary);
    border-color: var(--ui-primary);
    text-decoration: none; }
  .tempest-pagination .active span {
    color: #fff;
    background-color: var(--ui-primary);
    border-color: var(--ui-primary); }

.tempest-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg-elevated);
  color: var(--ui-text);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
  .tempest-btn:hover {
    color: var(--ui-primary);
    border-color: var(--ui-primary);
    text-decoration: none; }

.tempest-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: none;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: var(--tag-text);
  background-color: var(--tag-bg);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background-color 0.15s, color 0.15s; }
  .tempest-tag:hover {
    background-color: var(--tag-bg-hover);
    text-decoration: none;
    color: var(--tag-text-hover); }

.tempest-tag--0 {
  --tag-accent: hsl(0, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(0, 58%, 36%);
  --tag-text-hover: hsl(0, 64%, 32%); }

.dark .tempest-tag--0 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(0, 62%, 70%);
  --tag-text-hover: hsl(0, 68%, 76%); }

.tempest-tag--1 {
  --tag-accent: hsl(12, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(12, 58%, 36%);
  --tag-text-hover: hsl(12, 64%, 32%); }

.dark .tempest-tag--1 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(12, 62%, 70%);
  --tag-text-hover: hsl(12, 68%, 76%); }

.tempest-tag--2 {
  --tag-accent: hsl(24, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(24, 58%, 36%);
  --tag-text-hover: hsl(24, 64%, 32%); }

.dark .tempest-tag--2 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(24, 62%, 70%);
  --tag-text-hover: hsl(24, 68%, 76%); }

.tempest-tag--3 {
  --tag-accent: hsl(36, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(36, 58%, 36%);
  --tag-text-hover: hsl(36, 64%, 32%); }

.dark .tempest-tag--3 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(36, 62%, 70%);
  --tag-text-hover: hsl(36, 68%, 76%); }

.tempest-tag--4 {
  --tag-accent: hsl(48, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(48, 58%, 36%);
  --tag-text-hover: hsl(48, 64%, 32%); }

.dark .tempest-tag--4 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(48, 62%, 70%);
  --tag-text-hover: hsl(48, 68%, 76%); }

.tempest-tag--5 {
  --tag-accent: hsl(60, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(60, 58%, 36%);
  --tag-text-hover: hsl(60, 64%, 32%); }

.dark .tempest-tag--5 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(60, 62%, 70%);
  --tag-text-hover: hsl(60, 68%, 76%); }

.tempest-tag--6 {
  --tag-accent: hsl(72, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(72, 58%, 36%);
  --tag-text-hover: hsl(72, 64%, 32%); }

.dark .tempest-tag--6 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(72, 62%, 70%);
  --tag-text-hover: hsl(72, 68%, 76%); }

.tempest-tag--7 {
  --tag-accent: hsl(84, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(84, 58%, 36%);
  --tag-text-hover: hsl(84, 64%, 32%); }

.dark .tempest-tag--7 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(84, 62%, 70%);
  --tag-text-hover: hsl(84, 68%, 76%); }

.tempest-tag--8 {
  --tag-accent: hsl(96, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(96, 58%, 36%);
  --tag-text-hover: hsl(96, 64%, 32%); }

.dark .tempest-tag--8 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(96, 62%, 70%);
  --tag-text-hover: hsl(96, 68%, 76%); }

.tempest-tag--9 {
  --tag-accent: hsl(108, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(108, 58%, 36%);
  --tag-text-hover: hsl(108, 64%, 32%); }

.dark .tempest-tag--9 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(108, 62%, 70%);
  --tag-text-hover: hsl(108, 68%, 76%); }

.tempest-tag--10 {
  --tag-accent: hsl(120, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(120, 58%, 36%);
  --tag-text-hover: hsl(120, 64%, 32%); }

.dark .tempest-tag--10 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(120, 62%, 70%);
  --tag-text-hover: hsl(120, 68%, 76%); }

.tempest-tag--11 {
  --tag-accent: hsl(132, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(132, 58%, 36%);
  --tag-text-hover: hsl(132, 64%, 32%); }

.dark .tempest-tag--11 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(132, 62%, 70%);
  --tag-text-hover: hsl(132, 68%, 76%); }

.tempest-tag--12 {
  --tag-accent: hsl(144, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(144, 58%, 36%);
  --tag-text-hover: hsl(144, 64%, 32%); }

.dark .tempest-tag--12 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(144, 62%, 70%);
  --tag-text-hover: hsl(144, 68%, 76%); }

.tempest-tag--13 {
  --tag-accent: hsl(156, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(156, 58%, 36%);
  --tag-text-hover: hsl(156, 64%, 32%); }

.dark .tempest-tag--13 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(156, 62%, 70%);
  --tag-text-hover: hsl(156, 68%, 76%); }

.tempest-tag--14 {
  --tag-accent: hsl(168, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(168, 58%, 36%);
  --tag-text-hover: hsl(168, 64%, 32%); }

.dark .tempest-tag--14 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(168, 62%, 70%);
  --tag-text-hover: hsl(168, 68%, 76%); }

.tempest-tag--15 {
  --tag-accent: hsl(180, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(180, 58%, 36%);
  --tag-text-hover: hsl(180, 64%, 32%); }

.dark .tempest-tag--15 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(180, 62%, 70%);
  --tag-text-hover: hsl(180, 68%, 76%); }

.tempest-tag--16 {
  --tag-accent: hsl(192, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(192, 58%, 36%);
  --tag-text-hover: hsl(192, 64%, 32%); }

.dark .tempest-tag--16 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(192, 62%, 70%);
  --tag-text-hover: hsl(192, 68%, 76%); }

.tempest-tag--17 {
  --tag-accent: hsl(204, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(204, 58%, 36%);
  --tag-text-hover: hsl(204, 64%, 32%); }

.dark .tempest-tag--17 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(204, 62%, 70%);
  --tag-text-hover: hsl(204, 68%, 76%); }

.tempest-tag--18 {
  --tag-accent: hsl(216, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(216, 58%, 36%);
  --tag-text-hover: hsl(216, 64%, 32%); }

.dark .tempest-tag--18 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(216, 62%, 70%);
  --tag-text-hover: hsl(216, 68%, 76%); }

.tempest-tag--19 {
  --tag-accent: hsl(228, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(228, 58%, 36%);
  --tag-text-hover: hsl(228, 64%, 32%); }

.dark .tempest-tag--19 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(228, 62%, 70%);
  --tag-text-hover: hsl(228, 68%, 76%); }

.tempest-tag--20 {
  --tag-accent: hsl(240, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(240, 58%, 36%);
  --tag-text-hover: hsl(240, 64%, 32%); }

.dark .tempest-tag--20 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(240, 62%, 70%);
  --tag-text-hover: hsl(240, 68%, 76%); }

.tempest-tag--21 {
  --tag-accent: hsl(252, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(252, 58%, 36%);
  --tag-text-hover: hsl(252, 64%, 32%); }

.dark .tempest-tag--21 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(252, 62%, 70%);
  --tag-text-hover: hsl(252, 68%, 76%); }

.tempest-tag--22 {
  --tag-accent: hsl(264, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(264, 58%, 36%);
  --tag-text-hover: hsl(264, 64%, 32%); }

.dark .tempest-tag--22 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(264, 62%, 70%);
  --tag-text-hover: hsl(264, 68%, 76%); }

.tempest-tag--23 {
  --tag-accent: hsl(276, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(276, 58%, 36%);
  --tag-text-hover: hsl(276, 64%, 32%); }

.dark .tempest-tag--23 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(276, 62%, 70%);
  --tag-text-hover: hsl(276, 68%, 76%); }

.tempest-tag--24 {
  --tag-accent: hsl(288, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(288, 58%, 36%);
  --tag-text-hover: hsl(288, 64%, 32%); }

.dark .tempest-tag--24 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(288, 62%, 70%);
  --tag-text-hover: hsl(288, 68%, 76%); }

.tempest-tag--25 {
  --tag-accent: hsl(300, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(300, 58%, 36%);
  --tag-text-hover: hsl(300, 64%, 32%); }

.dark .tempest-tag--25 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(300, 62%, 70%);
  --tag-text-hover: hsl(300, 68%, 76%); }

.tempest-tag--26 {
  --tag-accent: hsl(312, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(312, 58%, 36%);
  --tag-text-hover: hsl(312, 64%, 32%); }

.dark .tempest-tag--26 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(312, 62%, 70%);
  --tag-text-hover: hsl(312, 68%, 76%); }

.tempest-tag--27 {
  --tag-accent: hsl(324, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(324, 58%, 36%);
  --tag-text-hover: hsl(324, 64%, 32%); }

.dark .tempest-tag--27 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(324, 62%, 70%);
  --tag-text-hover: hsl(324, 68%, 76%); }

.tempest-tag--28 {
  --tag-accent: hsl(336, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(336, 58%, 36%);
  --tag-text-hover: hsl(336, 64%, 32%); }

.dark .tempest-tag--28 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(336, 62%, 70%);
  --tag-text-hover: hsl(336, 68%, 76%); }

.tempest-tag--29 {
  --tag-accent: hsl(348, 72%, 58%);
  --tag-bg: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-muted));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 30%, var(--ui-bg-muted));
  --tag-text: hsl(348, 58%, 36%);
  --tag-text-hover: hsl(348, 64%, 32%); }

.dark .tempest-tag--29 {
  --tag-bg: color-mix(in srgb, var(--tag-accent) 16%, var(--ui-bg-elevated));
  --tag-bg-hover: color-mix(in srgb, var(--tag-accent) 22%, var(--ui-bg-elevated));
  --tag-text: hsl(348, 62%, 70%);
  --tag-text-hover: hsl(348, 68%, 76%); }

.tempest-tag--4 {
  --tag-accent: hsl(48, 68%, 56%);
  --tag-text: hsl(48, 54%, 34%); }

.dark .tempest-tag--4 {
  --tag-text: hsl(48, 58%, 72%); }

.tempest-tag--5 {
  --tag-accent: hsl(60, 68%, 56%);
  --tag-text: hsl(60, 54%, 34%); }

.dark .tempest-tag--5 {
  --tag-text: hsl(60, 58%, 72%); }

.tempest-tag--6 {
  --tag-accent: hsl(72, 68%, 56%);
  --tag-text: hsl(72, 54%, 34%); }

.dark .tempest-tag--6 {
  --tag-text: hsl(72, 58%, 72%); }

.tempest-tag--7 {
  --tag-accent: hsl(84, 68%, 56%);
  --tag-text: hsl(84, 54%, 34%); }

.dark .tempest-tag--7 {
  --tag-text: hsl(84, 58%, 72%); }

.tempest-tag--8 {
  --tag-accent: hsl(96, 68%, 56%);
  --tag-text: hsl(96, 54%, 34%); }

.dark .tempest-tag--8 {
  --tag-text: hsl(96, 58%, 72%); }

.tempest-tag--9 {
  --tag-accent: hsl(108, 68%, 56%);
  --tag-text: hsl(108, 54%, 34%); }

.dark .tempest-tag--9 {
  --tag-text: hsl(108, 58%, 72%); }

.tempest-tag--10 {
  --tag-accent: hsl(120, 68%, 56%);
  --tag-text: hsl(120, 54%, 34%); }

.dark .tempest-tag--10 {
  --tag-text: hsl(120, 58%, 72%); }

.tempest-blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none; }

.tempest-taxonomy-list .tempest-tag {
  padding: 0.25rem 0.5rem; }

.tempest-about-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ui-border); }

.tempest-about-photo {
  flex-shrink: 0;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ui-border);
  overflow: hidden;
  background-color: var(--ui-bg-elevated); }
  .tempest-about-photo img,
  .tempest-about-photo .tempest-about-photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.tempest-about-intro {
  min-width: 0;
  padding-top: 0.125rem; }
  .tempest-about-intro h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ui-text-highlighted); }

.tempest-about-tagline {
  margin: 0.5rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ui-text-muted); }

.tempest-about-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem; }
  .tempest-about-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--ui-text-muted);
    text-decoration: none;
    transition: color 0.15s; }
    .tempest-about-social a:hover {
      color: var(--ui-primary);
      text-decoration: none; }
    .tempest-about-social a svg {
      width: 1.25rem;
      height: 1.25rem; }

.tempest-about-content {
  margin-top: 0;
  padding-bottom: 4rem; }
  .tempest-about-content > :first-child {
    margin-top: 0; }
  .tempest-about-content h2 {
    margin-top: 2.5rem;
    padding-top: 0.25rem;
    font-size: 1.25rem; }
  .tempest-about-content ul {
    margin-top: 0.75em; }
    .tempest-about-content ul li {
      margin-bottom: 0.625em;
      color: var(--prose-body); }
    .tempest-about-content ul a {
      font-weight: 500; }

@media (max-width: 30rem) {
  .tempest-about-header {
    flex-direction: column;
    align-items: center;
    text-align: center; }
  .tempest-about-social {
    justify-content: center; } }

.tempest-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding: 0 1rem; }

.tempest-footer-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem; }
  .tempest-footer-icons a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ui-text-muted);
    text-decoration: none;
    transition: color 0.15s; }
    .tempest-footer-icons a:hover {
      color: var(--ui-primary);
      text-decoration: none; }
    .tempest-footer-icons a svg {
      width: 1.5rem;
      height: 1.5rem; }

.tempest-footer-credit {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ui-text-dimmed);
  text-align: center; }
  .tempest-footer-credit a {
    color: var(--ui-text-muted);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s; }
    .tempest-footer-credit a:hover {
      color: var(--ui-primary);
      text-decoration: none; }

.tempest-theme-toggle {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  overflow: hidden;
  background: none;
  border: none;
  padding: 0;
  color: var(--ui-text-muted);
  transition: color 0.15s; }
  .tempest-theme-toggle:hover {
    color: var(--ui-primary); }
  .tempest-theme-toggle svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s, transform 0.2s; }
  .tempest-theme-toggle .icon-moon {
    opacity: 1;
    transform: translateY(0); }
  .tempest-theme-toggle .icon-sun {
    opacity: 0;
    transform: translateY(-100%); }
  .dark .tempest-theme-toggle .icon-moon {
    opacity: 0;
    transform: translateY(100%); }
  .dark .tempest-theme-toggle .icon-sun {
    opacity: 1;
    transform: translateY(0); }

.search-wrapper svg {
  display: inline-block;
  background-color: transparent; }

.search-modal {
  position: fixed;
  inset: 0;
  height: 100%;
  width: 100%;
  background-color: color-mix(in srgb, var(--ui-bg) 60%, transparent);
  backdrop-filter: blur(4px);
  z-index: 9999;
  transition: 0.2s;
  opacity: 0;
  visibility: hidden; }
  .search-modal.show {
    opacity: 1;
    visibility: visible; }
  .search-modal .search-wrapper-content {
    width: 660px;
    max-width: 96%;
    margin: 100px auto;
    background-color: var(--ui-bg-elevated);
    border: 1px solid var(--ui-border);
    border-radius: 0.75rem;
    overflow: hidden; }

.search-input-body {
  padding: 14px;
  position: relative; }
  .search-input-body input {
    border: 1px solid var(--ui-border);
    width: 100%;
    border-radius: 0.5rem;
    height: 52px;
    padding: 0 15px 0 40px;
    transition: 0.25s;
    outline: none;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--font-sans); }
    .search-input-body input:focus {
      border-color: var(--ui-primary); }
  .search-input-body label {
    position: absolute;
    left: 28px;
    top: calc(50% - 13px);
    color: var(--ui-text-dimmed); }
    .search-input-body label .search-reset {
      display: none;
      transition: 0.1s; }
      .search-input-body label .search-reset:hover {
        cursor: pointer;
        color: #fb5c5c; }

.search-modal .search-wrapper-body {
  max-height: calc(100vh - 350px);
  padding: 14px;
  overflow-y: auto;
  background-color: var(--ui-bg-muted);
  border-top: 1px solid var(--ui-border); }

.search-result-empty {
  display: block;
  text-align: center;
  padding: 32px 0;
  cursor: text;
  user-select: none;
  color: var(--ui-text-dimmed); }

.search-result:not(:empty) + .search-result-empty {
  display: none; }

.search-result-item {
  display: flex;
  align-items: flex-start;
  padding: 10px 16px;
  border-radius: 0.5rem;
  border: 1px solid var(--ui-border);
  background-color: var(--ui-bg);
  transition: 0s;
  margin-bottom: 2px;
  position: relative;
  text-decoration: none; }
  .search-result-item:focus, .search-result-item.search-item-selected, .search-result-item:hover {
    background-color: var(--ui-primary); }
    .search-result-item:focus *, .search-result-item.search-item-selected *, .search-result-item:hover * {
      color: #fff; }
    .search-result-item:focus mark, .search-result-item.search-item-selected mark, .search-result-item:hover mark {
      background-color: rgba(255, 255, 255, 0.4); }

.search-title {
  font-size: 1rem;
  color: var(--ui-text-highlighted);
  margin-bottom: 0;
  line-height: 1.35;
  font-weight: 600; }
  .search-title::before {
    position: absolute;
    inset: 0;
    z-index: 10;
    content: ""; }

.search-description,
.search-content {
  font-size: 0.875rem;
  color: var(--ui-text-muted);
  margin-top: 0.375rem; }

.search-info > div {
  color: var(--ui-text-dimmed); }

.search-wrapper-footer {
  color: var(--ui-text-dimmed);
  font-size: 12px;
  padding: 8px 14px;
  user-select: none;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--ui-border); }
  .search-wrapper-footer kbd {
    color: var(--ui-text-muted);
    background-color: var(--ui-bg-muted);
    font-size: 12px;
    border-radius: 3px;
    margin-right: 3px;
    padding: 2px 4px;
    border: 1px solid var(--ui-border); }
  .search-wrapper-footer span:not(:last-child) {
    margin-right: 16px; }
  .search-wrapper-footer span:last-child {
    margin-left: auto;
    cursor: pointer; }

.search-modal .search-image {
  margin-right: 15px;
  flex-shrink: 0; }
  .search-modal .search-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 0.375rem; }

.search-content-block {
  flex-grow: 1; }

.search-result-group-title {
  padding: 0 12px;
  display: inline-block;
  margin-bottom: 5px;
  margin-top: 15px;
  font-size: 1rem;
  color: var(--ui-text-muted); }

@media (max-width: 576px) {
  .search-wrapper .search-wrapper-footer span:not(.search-result-info) {
    display: none; } }