/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --spacing: 0.25rem;
    --container-5xl: 64rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --font-fira-code: 'Fira Code', monospace;
    --font-open-sans: 'Open Sans', sans-serif;
    --color-better-black: #454545;
  }
}
@layer utilities {
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .block {
    display: block;
  }
  .inline {
    display: inline;
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .resize {
    resize: both;
  }
  .list-inside {
    list-style-position: inside;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }
  .font-fira-code {
    font-family: var(--font-fira-code);
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .font-extralight {
    --tw-font-weight: var(--font-weight-extralight);
    font-weight: var(--font-weight-extralight);
  }
  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }
  .text-better-black {
    color: var(--color-better-black);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .no-underline {
    text-decoration-line: none;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .md\:col-span-3 {
    @media (width >= 48rem) {
      grid-column: span 3 / span 3;
    }
  }
  .md\:grid {
    @media (width >= 48rem) {
      display: grid;
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .md\:gap-6 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .\[\&_h2\]\:scroll-mt-4 {
    & h2 {
      scroll-margin-top: calc(var(--spacing) * 4);
    }
  }
  .\[\&_h3\]\:scroll-mt-4 {
    & h3 {
      scroll-margin-top: calc(var(--spacing) * 4);
    }
  }
  .\[\&_h4\]\:scroll-mt-4 {
    & h4 {
      scroll-margin-top: calc(var(--spacing) * 4);
    }
  }
  .\[\&_ol\]\:list-inside {
    & ol {
      list-style-position: inside;
    }
  }
  .\[\&_ol\]\:pl-0 {
    & ol {
      padding-left: calc(var(--spacing) * 0);
    }
  }
}
@layer components {
  code[class*="language-"], pre[class*="language-"] {
    color: #f8f8f2;
    background: none;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 1em;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }
  pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
    border-radius: 0;
  }
  :not(pre)>code[class*="language-"], pre[class*="language-"] {
    background: #272822;
  }
  :not(pre)>code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal;
  }
  .token.comment, .token.prolog, .token.doctype, .token.cdata {
    color: slategray;
  }
  .token.punctuation {
    color: #f8f8f2;
  }
  .token.namespace {
    opacity: .7;
  }
  .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
    color: #f92672;
  }
  .token.boolean, .token.number {
    color: #ae81ff;
  }
  .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
    color: #a6e22e;
  }
  .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {
    color: #f8f8f2;
  }
  .token.atrule, .token.attr-value, .token.function, .token.class-name {
    color: #e6db74;
  }
  .token.keyword {
    color: #66d9ef;
  }
  .token.regex, .token.important {
    color: #fd971f;
  }
  .token.important, .token.bold {
    font-weight: bold;
  }
  .token.italic {
    font-style: italic;
  }
  .token.entity {
    cursor: help;
  }
}
@layer base {
  html {
    font-size: 16px;
  }
  * {
    color: var(--color-better-black);
  }
  a {
    color: var(--color-blue-600);
  }
  body {
    font-family: var(--font-open-sans);
  }
  code, pre {
    font-family: var(--font-fira-code);
  }
  p {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-font-weight: initial;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-leading: initial;
    }
  }
}