/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif;
    --font-serif: Georgia, Cambria, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-emerald-950: oklch(26.2% 0.051 172.552);
    --color-teal-50: oklch(98.4% 0.014 180.72);
    --color-teal-100: oklch(95.3% 0.051 180.801);
    --color-teal-200: oklch(91% 0.096 180.426);
    --color-teal-300: oklch(85.5% 0.138 181.071);
    --color-teal-400: oklch(77.7% 0.152 181.912);
    --color-teal-500: oklch(70.4% 0.14 182.503);
    --color-teal-600: oklch(60% 0.118 184.704);
    --color-teal-700: oklch(51.1% 0.096 186.391);
    --color-teal-800: oklch(43.7% 0.078 188.216);
    --color-teal-900: oklch(38.6% 0.063 188.416);
    --color-teal-950: oklch(27.7% 0.046 192.524);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-950: oklch(28.2% 0.091 267.935);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-5xl: 64rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-wide: 0.025em;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --font-typewriter: "Courier Prime", "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .top-0 {
    top: 0;
  }
  .z-50 {
    z-index: 50;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-auto {
    margin-inline: auto;
  }
  .prose {
    color: var(--tw-prose-body);
    max-width: 65ch;
    :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-lead);
      font-size: 1.25em;
      line-height: 1.6;
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }
    :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-links);
      text-decoration: underline;
      font-weight: 500;
    }
    :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-bold);
      font-weight: 600;
    }
    :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: decimal;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="A" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="I" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: decimal;
    }
    :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: disc;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
      font-weight: 400;
      color: var(--tw-prose-counters);
    }
    :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
      color: var(--tw-prose-bullets);
    }
    :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.25em;
    }
    :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-color: var(--tw-prose-hr);
      border-top-width: 1px;
      margin-top: 3em;
      margin-bottom: 3em;
    }
    :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 500;
      font-style: italic;
      color: var(--tw-prose-quotes);
      border-inline-start-width: 0.25rem;
      border-inline-start-color: var(--tw-prose-quote-borders);
      quotes: "\201C""\201D""\2018""\2019";
      margin-top: 1.6em;
      margin-bottom: 1.6em;
      padding-inline-start: 1em;
    }
    :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
      content: open-quote;
    }
    :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
      content: close-quote;
    }
    :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 800;
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }
    :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 900;
      color: inherit;
    }
    :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 700;
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
    }
    :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 800;
      color: inherit;
    }
    :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      font-size: 1.25em;
      margin-top: 1.6em;
      margin-bottom: 0.6em;
      line-height: 1.6;
    }
    :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      line-height: 1.5;
    }
    :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      display: block;
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 500;
      font-family: inherit;
      color: var(--tw-prose-kbd);
      box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
      font-size: 0.875em;
      border-radius: 0.3125rem;
      padding-top: 0.1875em;
      padding-inline-end: 0.375em;
      padding-bottom: 0.1875em;
      padding-inline-start: 0.375em;
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-code);
      font-weight: 600;
      font-size: 0.875em;
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
      content: "`";
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
      content: "`";
    }
    :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.875em;
    }
    :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.9em;
    }
    :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-pre-code);
      background-color: var(--tw-prose-pre-bg);
      overflow-x: auto;
      font-weight: 400;
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
      border-radius: 0.375rem;
      padding-top: 0.8571429em;
      padding-inline-end: 1.1428571em;
      padding-bottom: 0.8571429em;
      padding-inline-start: 1.1428571em;
    }
    :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      background-color: transparent;
      border-width: 0;
      border-radius: 0;
      padding: 0;
      font-weight: inherit;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
    }
    :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
      content: none;
    }
    :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
      content: none;
    }
    :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      width: 100%;
      table-layout: auto;
      margin-top: 2em;
      margin-bottom: 2em;
      font-size: 0.875em;
      line-height: 1.7142857;
    }
    :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-th-borders);
    }
    :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      vertical-align: bottom;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-td-borders);
    }
    :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 0;
    }
    :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      vertical-align: baseline;
    }
    :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-top-width: 1px;
      border-top-color: var(--tw-prose-th-borders);
    }
    :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      vertical-align: top;
    }
    :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      text-align: start;
    }
    :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-captions);
      font-size: 0.875em;
      line-height: 1.4285714;
      margin-top: 0.8571429em;
    }
    --tw-prose-body: oklch(37.3% 0.034 259.733);
    --tw-prose-headings: oklch(21% 0.034 264.665);
    --tw-prose-lead: oklch(44.6% 0.03 256.802);
    --tw-prose-links: oklch(21% 0.034 264.665);
    --tw-prose-bold: oklch(21% 0.034 264.665);
    --tw-prose-counters: oklch(55.1% 0.027 264.364);
    --tw-prose-bullets: oklch(87.2% 0.01 258.338);
    --tw-prose-hr: oklch(92.8% 0.006 264.531);
    --tw-prose-quotes: oklch(21% 0.034 264.665);
    --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-captions: oklch(55.1% 0.027 264.364);
    --tw-prose-kbd: oklch(21% 0.034 264.665);
    --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
    --tw-prose-code: oklch(21% 0.034 264.665);
    --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
    --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
    --tw-prose-th-borders: oklch(87.2% 0.01 258.338);
    --tw-prose-td-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-invert-body: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
    --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
    --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
    font-size: 1rem;
    line-height: 1.75;
    :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(.prose > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.5em;
      padding-inline-start: 1.625em;
    }
    :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-top: 0.5714286em;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-full {
    width: 100%;
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-none {
    max-width: none;
  }
  .min-w-0 {
    min-width: 0;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .flex-col {
    flex-direction: column;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-slate-200 {
    border-color: var(--color-slate-200);
  }
  .border-slate-300 {
    border-color: var(--color-slate-300);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/90 {
    background-color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .text-justify {
    text-align: justify;
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .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));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-slate-600 {
    color: var(--color-slate-600);
  }
  .text-slate-700 {
    color: var(--color-slate-700);
  }
  .text-slate-950 {
    color: var(--color-slate-950);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .underline {
    text-decoration-line: underline;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .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,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .prose-slate {
    --tw-prose-body: oklch(37.2% 0.044 257.287);
    --tw-prose-headings: oklch(20.8% 0.042 265.755);
    --tw-prose-lead: oklch(44.6% 0.043 257.281);
    --tw-prose-links: oklch(20.8% 0.042 265.755);
    --tw-prose-bold: oklch(20.8% 0.042 265.755);
    --tw-prose-counters: oklch(55.4% 0.046 257.417);
    --tw-prose-bullets: oklch(86.9% 0.022 252.894);
    --tw-prose-hr: oklch(92.9% 0.013 255.508);
    --tw-prose-quotes: oklch(20.8% 0.042 265.755);
    --tw-prose-quote-borders: oklch(92.9% 0.013 255.508);
    --tw-prose-captions: oklch(55.4% 0.046 257.417);
    --tw-prose-kbd: oklch(20.8% 0.042 265.755);
    --tw-prose-kbd-shadows: color-mix(in oklab, oklch(20.8% 0.042 265.755) 10%, transparent);
    --tw-prose-code: oklch(20.8% 0.042 265.755);
    --tw-prose-pre-code: oklch(92.9% 0.013 255.508);
    --tw-prose-pre-bg: oklch(27.9% 0.041 260.031);
    --tw-prose-th-borders: oklch(86.9% 0.022 252.894);
    --tw-prose-td-borders: oklch(92.9% 0.013 255.508);
    --tw-prose-invert-body: oklch(86.9% 0.022 252.894);
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: oklch(70.4% 0.04 256.788);
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: oklch(70.4% 0.04 256.788);
    --tw-prose-invert-bullets: oklch(44.6% 0.043 257.281);
    --tw-prose-invert-hr: oklch(37.2% 0.044 257.287);
    --tw-prose-invert-quotes: oklch(96.8% 0.007 247.896);
    --tw-prose-invert-quote-borders: oklch(37.2% 0.044 257.287);
    --tw-prose-invert-captions: oklch(70.4% 0.04 256.788);
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: oklch(86.9% 0.022 252.894);
    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
    --tw-prose-invert-th-borders: oklch(44.6% 0.043 257.281);
    --tw-prose-invert-td-borders: oklch(37.2% 0.044 257.287);
  }
  .hover\:border-slate-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-400);
      }
    }
  }
  .hover\:bg-slate-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-100);
      }
    }
  }
  .hover\:text-blue-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
  }
  .hover\:text-slate-950 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-950);
      }
    }
  }
  .sm\:h-7 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 7);
    }
  }
  .sm\:w-7 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 7);
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:text-lg {
    @media (width >= 40rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .lg\:max-w-\[70\%\] {
    @media (width >= 64rem) {
      max-width: 70%;
    }
  }
  .dark\:border-slate-700 {
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-700);
    }
  }
  .dark\:border-slate-800 {
    &:where(.dark, .dark *) {
      border-color: var(--color-slate-800);
    }
  }
  .dark\:bg-slate-950 {
    &:where(.dark, .dark *) {
      background-color: var(--color-slate-950);
    }
  }
  .dark\:bg-slate-950\/90 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 90%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-slate-950) 90%, transparent);
      }
    }
  }
  .dark\:text-slate-100 {
    &:where(.dark, .dark *) {
      color: var(--color-slate-100);
    }
  }
  .dark\:text-slate-200 {
    &:where(.dark, .dark *) {
      color: var(--color-slate-200);
    }
  }
  .dark\:text-slate-300 {
    &:where(.dark, .dark *) {
      color: var(--color-slate-300);
    }
  }
  .dark\:text-slate-400 {
    &:where(.dark, .dark *) {
      color: var(--color-slate-400);
    }
  }
  .dark\:text-white {
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .dark\:prose-invert {
    &:where(.dark, .dark *) {
      --tw-prose-body: var(--tw-prose-invert-body);
      --tw-prose-headings: var(--tw-prose-invert-headings);
      --tw-prose-lead: var(--tw-prose-invert-lead);
      --tw-prose-links: var(--tw-prose-invert-links);
      --tw-prose-bold: var(--tw-prose-invert-bold);
      --tw-prose-counters: var(--tw-prose-invert-counters);
      --tw-prose-bullets: var(--tw-prose-invert-bullets);
      --tw-prose-hr: var(--tw-prose-invert-hr);
      --tw-prose-quotes: var(--tw-prose-invert-quotes);
      --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
      --tw-prose-captions: var(--tw-prose-invert-captions);
      --tw-prose-kbd: var(--tw-prose-invert-kbd);
      --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
      --tw-prose-code: var(--tw-prose-invert-code);
      --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
      --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
      --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
      --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
    }
  }
  .dark\:hover\:border-slate-500 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-slate-500);
        }
      }
    }
  }
  .dark\:hover\:bg-slate-900 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-slate-900);
        }
      }
    }
  }
  .dark\:hover\:text-blue-300 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-blue-300);
        }
      }
    }
  }
  .dark\:hover\:text-white {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
}
@keyframes hero-blink {
  to {
    visibility: hidden;
  }
}
@layer components {
  .section-label {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    margin: 0 0 calc(var(--spacing) * 5);
    font-family: var(--font-typewriter);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-slate-500);
  }
  .section-label::before {
    content: "//";
    color: var(--color-blue-500);
  }
  .section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-slate-200);
  }
  .dark .section-label {
    color: var(--color-slate-400);
  }
  .dark .section-label::before {
    color: var(--color-blue-400);
  }
  .dark .section-label::after {
    background: var(--color-slate-800);
  }
  .page-hero {
    border-bottom: 1px solid var(--color-slate-200);
    padding-bottom: calc(var(--spacing) * 8);
  }
  .dark .page-hero {
    border-color: var(--color-slate-800);
  }
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 5);
    font-family: var(--font-typewriter);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .breadcrumb a {
    color: var(--color-slate-500);
    text-decoration: none;
  }
  .breadcrumb a:hover {
    color: var(--color-slate-950);
  }
  .dark .breadcrumb a {
    color: var(--color-slate-400);
  }
  .dark .breadcrumb a:hover {
    color: var(--color-white);
  }
  .breadcrumb-sep {
    color: var(--color-slate-300);
  }
  .dark .breadcrumb-sep {
    color: var(--color-slate-700);
  }
  .page-title {
    margin: 0;
    max-width: 52rem;
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.015em;
    line-height: 1.08;
    color: var(--color-slate-950);
  }
  .dark .page-title {
    color: var(--color-white);
  }
  .page-desc {
    margin: calc(var(--spacing) * 4) 0 0;
    max-width: 42rem;
    color: var(--color-slate-600);
  }
  .dark .page-desc {
    color: var(--color-slate-300);
  }
  .page-meta {
    margin: calc(var(--spacing) * 4) 0 0;
    font-family: var(--font-typewriter);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-slate-500);
  }
  .dark .page-meta {
    color: var(--color-slate-400);
  }
  .hero {
    padding: calc(var(--spacing) * 8) 0 calc(var(--spacing) * 14);
  }
  .hero-kicker {
    margin: 0 0 calc(var(--spacing) * 4);
    font-family: var(--font-typewriter);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-blue-700);
  }
  .hero-kicker::after {
    content: "▌";
    margin-left: calc(var(--spacing) * 1);
    animation: hero-blink 1.1s steps(2, start) infinite;
  }
  .dark .hero-kicker {
    color: var(--color-blue-300);
  }
  .hero h1 {
    margin: 0;
    max-width: 56rem;
    font-size: clamp(2.75rem, 6.5vw, 4.75rem);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: -0.03em;
    line-height: 1.04;
    color: var(--color-slate-950);
  }
  .dark .hero h1 {
    color: var(--color-white);
  }
  .hero-accent {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: var(--font-weight-semibold);
    background: linear-gradient(100deg, var(--color-blue-600), var(--color-teal-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .dark .hero-accent {
    background: linear-gradient(100deg, var(--color-blue-400), var(--color-teal-300));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hero-sub {
    margin: calc(var(--spacing) * 5) 0 0;
    max-width: 40rem;
    font-size: var(--text-lg);
    color: var(--color-slate-600);
  }
  .dark .hero-sub {
    color: var(--color-slate-300);
  }
  .hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 10);
    margin-top: calc(var(--spacing) * 9);
  }
  .hero-stat-num {
    display: block;
    font-family: var(--font-typewriter);
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-slate-950);
  }
  .dark .hero-stat-num {
    color: var(--color-white);
  }
  .hero-stat-label {
    display: block;
    margin-top: calc(var(--spacing) * 1.5);
    font-family: var(--font-typewriter);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-slate-500);
  }
  .dark .hero-stat-label {
    color: var(--color-slate-400);
  }
  .home-section {
    margin-bottom: calc(var(--spacing) * 14);
  }
  .index-grid {
    display: grid;
    gap: calc(var(--spacing) * 5);
  }
  .index-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    padding: calc(var(--spacing) * 7);
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  }
  .index-card:hover {
    border-color: var(--color-blue-400);
    transform: translateY(-3px);
    box-shadow: 0 14px 34px -18px rgb(37 99 235 / 0.35);
  }
  .dark .index-card {
    border-color: var(--color-slate-800);
    background: var(--color-slate-900);
  }
  .dark .index-card:hover {
    border-color: var(--color-blue-500);
    box-shadow: 0 14px 34px -18px rgb(59 130 246 / 0.3);
  }
  .index-card-number {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 4);
    font-family: var(--font-typewriter);
    font-size: 4.5rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-slate-100);
    user-select: none;
    pointer-events: none;
  }
  .dark .index-card-number {
    color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-slate-800) 75%, transparent);
    }
  }
  .index-card h3 {
    position: relative;
    margin: 0 0 calc(var(--spacing) * 2);
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--text-2xl--line-height);
  }
  .index-card h3 a {
    color: var(--color-slate-950);
    text-decoration: none;
  }
  .index-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .index-card:hover h3 a {
    color: var(--color-blue-700);
  }
  .dark .index-card h3 a {
    color: var(--color-white);
  }
  .dark .index-card:hover h3 a {
    color: var(--color-blue-300);
  }
  .index-card-desc {
    position: relative;
    margin: 0 0 calc(var(--spacing) * 4);
    max-width: 26rem;
    font-size: var(--text-sm);
    color: var(--color-slate-600);
  }
  .dark .index-card-desc {
    color: var(--color-slate-300);
  }
  .index-card-count {
    margin: 0 0 calc(var(--spacing) * 4);
    font-family: var(--font-typewriter);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-blue-700);
  }
  .dark .index-card-count {
    color: var(--color-blue-300);
  }
  .index-card-notes {
    position: relative;
    z-index: 1;
    display: grid;
    gap: calc(var(--spacing) * 2);
    border-top: 1px dashed var(--color-slate-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .dark .index-card-notes {
    border-color: var(--color-slate-800);
  }
  .index-card-notes a {
    display: flex;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    color: var(--color-slate-700);
    text-decoration: none;
  }
  .index-card-notes a span {
    color: var(--color-blue-500);
    transition: transform 150ms ease;
  }
  .index-card-notes a:hover {
    color: var(--color-blue-700);
  }
  .index-card-notes a:hover span {
    transform: translateX(3px);
  }
  .dark .index-card-notes a {
    color: var(--color-slate-300);
  }
  .dark .index-card-notes a:hover {
    color: var(--color-blue-300);
  }
  .recent-grid {
    display: grid;
    gap: calc(var(--spacing) * 5);
  }
  .recent-card {
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    text-decoration: none;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  }
  .recent-card:hover {
    border-color: var(--color-blue-400);
    transform: translateY(-3px);
    box-shadow: 0 14px 34px -18px rgb(37 99 235 / 0.35);
  }
  .dark .recent-card {
    border-color: var(--color-slate-800);
    background: var(--color-slate-900);
  }
  .dark .recent-card:hover {
    border-color: var(--color-blue-500);
    box-shadow: 0 14px 34px -18px rgb(59 130 246 / 0.3);
  }
  .recent-card-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-slate-100);
  }
  .recent-card-thumb img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
  }
  .recent-card:hover .recent-card-thumb img {
    transform: scale(1.05);
  }
  .recent-card-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: var(--color-slate-400);
  }
  .recent-card-thumb-placeholder svg {
    height: 25%;
    width: 25%;
  }
  .dark .recent-card-thumb {
    background-color: var(--color-slate-800);
  }
  .dark .recent-card-thumb-placeholder {
    color: var(--color-slate-500);
  }
  .recent-card-body {
    display: block;
    padding: calc(var(--spacing) * 4);
  }
  .recent-card-topic {
    display: block;
    overflow: hidden;
    margin-bottom: calc(var(--spacing) * 1.5);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--font-typewriter);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-blue-700);
  }
  .dark .recent-card-topic {
    color: var(--color-blue-300);
  }
  .recent-card-title {
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    color: var(--color-slate-950);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
  }
  .recent-card:hover .recent-card-title {
    color: var(--color-blue-700);
  }
  .dark .recent-card-title {
    color: var(--color-white);
  }
  .dark .recent-card:hover .recent-card-title {
    color: var(--color-blue-300);
  }
  .cat-page, .group-page, .timeline-page, .posts-page {
    display: grid;
    gap: calc(var(--spacing) * 8);
  }
  .blueprint {
    border: 1px solid var(--color-teal-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background-color: color-mix(in srgb, oklch(98.4% 0.014 180.72) 45%, #fff);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-teal-50) 45%, var(--color-white));
    }
    background-image: linear-gradient(color-mix(in srgb, oklch(60% 0.118 184.704) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, oklch(60% 0.118 184.704) 14%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, oklch(60% 0.118 184.704) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, oklch(60% 0.118 184.704) 7%, transparent) 1px, transparent 1px);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(color-mix(in oklab, var(--color-teal-600) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--color-teal-600) 14%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in oklab, var(--color-teal-600) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--color-teal-600) 7%, transparent) 1px, transparent 1px);
    }
    background-size: 7.5rem 7.5rem, 7.5rem 7.5rem, 1.5rem 1.5rem, 1.5rem 1.5rem;
  }
  .dark .blueprint {
    border-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-teal-400) 30%, transparent);
    }
    background-color: color-mix(in srgb, oklch(27.7% 0.046 192.524) 30%, oklch(12.9% 0.042 264.695));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-teal-950) 30%, var(--color-slate-950));
    }
    background-image: linear-gradient(color-mix(in srgb, oklch(77.7% 0.152 181.912) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, oklch(77.7% 0.152 181.912) 12%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, oklch(77.7% 0.152 181.912) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, oklch(77.7% 0.152 181.912) 6%, transparent) 1px, transparent 1px);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(color-mix(in oklab, var(--color-teal-400) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--color-teal-400) 12%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in oklab, var(--color-teal-400) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--color-teal-400) 6%, transparent) 1px, transparent 1px);
    }
  }
  .bp-grid {
    display: grid;
    gap: calc(var(--spacing) * 5);
    padding: calc(var(--spacing) * 6);
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }
  .bp-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border: 1px solid var(--color-teal-200);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, #fff 88%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--color-white) 88%, transparent);
    }
    padding: calc(var(--spacing) * 4);
    text-decoration: none;
    backdrop-filter: blur(2px);
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  }
  .bp-card:hover {
    border-color: var(--color-teal-500);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -18px rgb(13 148 136 / 0.45);
  }
  .dark .bp-card {
    border-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-teal-400) 25%, transparent);
    }
    background: color-mix(in srgb, oklch(20.8% 0.042 265.755) 82%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--color-slate-900) 82%, transparent);
    }
  }
  .dark .bp-card:hover {
    border-color: var(--color-teal-400);
  }
  .bp-card-head {
    display: flex;
    align-items: baseline;
    gap: calc(var(--spacing) * 2.5);
  }
  .bp-ref {
    flex-shrink: 0;
    font-family: var(--font-typewriter);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1em;
    color: var(--color-teal-700);
    border: 1px solid var(--color-teal-300);
    border-radius: var(--radius-sm);
    padding: 0 calc(var(--spacing) * 1.5);
  }
  .dark .bp-ref {
    color: var(--color-teal-300);
    border-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-teal-400) 45%, transparent);
    }
  }
  .bp-card-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    color: var(--color-slate-950);
  }
  .bp-card:hover .bp-card-name {
    color: var(--color-teal-700);
  }
  .dark .bp-card-name {
    color: var(--color-white);
  }
  .dark .bp-card:hover .bp-card-name {
    color: var(--color-teal-300);
  }
  .bp-frame {
    position: relative;
    display: block;
    padding: calc(var(--spacing) * 2);
  }
  .bp-frame::before, .bp-frame::after, .bp-frame-inner::before, .bp-frame-inner::after {
    content: "";
    position: absolute;
    height: 0.9rem;
    width: 0.9rem;
    border-color: var(--color-teal-500);
    border-style: solid;
    border-width: 0;
    transition: border-color 180ms ease;
  }
  .bp-frame::before {
    top: 0;
    left: 0;
    border-top-width: 2px;
    border-left-width: 2px;
  }
  .bp-frame::after {
    bottom: 0;
    right: 0;
    border-bottom-width: 2px;
    border-right-width: 2px;
  }
  .bp-frame-inner::before {
    top: 0;
    right: 0;
    border-top-width: 2px;
    border-right-width: 2px;
  }
  .bp-frame-inner::after {
    bottom: 0;
    left: 0;
    border-bottom-width: 2px;
    border-left-width: 2px;
  }
  .bp-card:hover .bp-frame::before, .bp-card:hover .bp-frame::after, .bp-card:hover .bp-frame-inner::before, .bp-card:hover .bp-frame-inner::after {
    border-color: var(--color-teal-600);
  }
  .dark .bp-frame::before, .dark .bp-frame::after, .dark .bp-frame-inner::before, .dark .bp-frame-inner::after {
    border-color: var(--color-teal-400);
  }
  .bp-frame-inner {
    position: static;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    background: var(--color-slate-100);
  }
  .dark .bp-frame-inner {
    background: var(--color-slate-800);
  }
  .bp-frame-inner img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
  }
  .bp-card:hover .bp-frame-inner img {
    transform: scale(1.05);
  }
  .bp-frame-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: var(--color-slate-400);
  }
  .bp-frame-placeholder svg {
    height: 25%;
    width: 25%;
  }
  .dark .bp-frame-placeholder {
    color: var(--color-slate-600);
  }
  .bp-card-meta {
    font-family: var(--font-typewriter);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-teal-700);
  }
  .dark .bp-card-meta {
    color: var(--color-teal-300);
  }
  .bp-titleblock {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-teal-200);
    background: color-mix(in srgb, #fff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
    font-family: var(--font-typewriter);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-teal-800);
  }
  .bp-titleblock span {
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 5);
  }
  .bp-titleblock span + span {
    border-left: 1px solid var(--color-teal-200);
  }
  .dark .bp-titleblock {
    border-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-teal-400) 30%, transparent);
    }
    background: color-mix(in srgb, oklch(12.9% 0.042 264.695) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--color-slate-950) 70%, transparent);
    }
    color: var(--color-teal-300);
  }
  .dark .bp-titleblock span + span {
    border-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-teal-400) 30%, transparent);
    }
  }
  .pcb {
    border: 1px solid var(--color-emerald-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background-color: color-mix(in srgb, oklch(97.9% 0.021 166.113) 55%, #fff);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-50) 55%, var(--color-white));
    }
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23b45309'%20stroke-opacity='0.3'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M0%2040H30L50%2060H110L130%2040H160'/%3E%3Cpath%20d='M0%2048H26L46%2068H114L134%2048H160'/%3E%3Cpath%20d='M0%2056H22L42%2076H118L138%2056H160'/%3E%3Cpath%20d='M0%20120H50L70%20100H90L110%20120H160'/%3E%3Cpath%20d='M40%20140H120'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23b45309'%20stroke-opacity='0.4'%20stroke-width='1.5'%3E%3Ccircle%20cx='40'%20cy='140'%20r='3.5'/%3E%3Ccircle%20cx='120'%20cy='140'%20r='3.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 10rem 10rem;
  }
  .dark .pcb {
    border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
    }
    background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 45%, oklch(12.9% 0.042 264.695));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-950) 45%, var(--color-slate-950));
    }
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23f59e0b'%20stroke-opacity='0.22'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M0%2040H30L50%2060H110L130%2040H160'/%3E%3Cpath%20d='M0%2048H26L46%2068H114L134%2048H160'/%3E%3Cpath%20d='M0%2056H22L42%2076H118L138%2056H160'/%3E%3Cpath%20d='M0%20120H50L70%20100H90L110%20120H160'/%3E%3Cpath%20d='M40%20140H120'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23f59e0b'%20stroke-opacity='0.3'%20stroke-width='1.5'%3E%3Ccircle%20cx='40'%20cy='140'%20r='3.5'/%3E%3Ccircle%20cx='120'%20cy='140'%20r='3.5'/%3E%3C/g%3E%3C/svg%3E");
  }
  .pcb-grid {
    display: grid;
    gap: calc(var(--spacing) * 5) calc(var(--spacing) * 6);
    padding: calc(var(--spacing) * 6);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
  .pcb-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2.5);
    margin-inline: 0.45rem;
    border: 1px solid var(--color-slate-700);
    border-radius: var(--radius-md);
    background: var(--color-slate-900);
    padding: calc(var(--spacing) * 4);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 10px 22px -14px rgb(2 6 23 / 0.55);
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  }
  .pcb-chip:hover {
    border-color: var(--color-emerald-500);
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 16px 32px -16px rgb(16 185 129 / 0.5);
  }
  .dark .pcb-chip {
    border-color: var(--color-slate-600);
  }
  .dark .pcb-chip:hover {
    border-color: var(--color-emerald-400);
  }
  .pcb-chip::before, .pcb-chip::after {
    content: "";
    position: absolute;
    top: 1.25rem;
    bottom: 1.25rem;
    width: 1.3rem;
    --pcb-pin: color-mix(in srgb, oklch(82.8% 0.189 84.429) 85%, oklch(92.4% 0.12 95.746));
    @supports (color: color-mix(in lab, red, red)) {
      --pcb-pin: color-mix(in oklab, var(--color-amber-400) 85%, var(--color-amber-200));
    }
    --pcb-trace: color-mix(in srgb, oklch(55.5% 0.163 48.998) 55%, oklch(95% 0.052 163.051));
    @supports (color: color-mix(in lab, red, red)) {
      --pcb-trace: color-mix(in oklab, var(--color-amber-700) 55%, var(--color-emerald-100));
    }
    background-image: repeating-linear-gradient(180deg, var(--pcb-pin) 0 0.5rem, transparent 0.5rem 1.2rem), repeating-linear-gradient(180deg, transparent 0 calc(0.25rem - 1px), var(--pcb-trace) calc(0.25rem - 1px) calc(0.25rem + 1px), transparent calc(0.25rem + 1px) 6rem), repeating-linear-gradient(180deg, transparent 0 calc(3.85rem - 1px), var(--pcb-trace) calc(3.85rem - 1px) calc(3.85rem + 1px), transparent calc(3.85rem + 1px) 8.4rem);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 0.45rem 100%, 100% 100%, 100% 100%;
    transition: filter 180ms ease;
  }
  .pcb-chip::before {
    left: -1.3rem;
    background-position: right 0 top 0, 0 0, 0 0;
  }
  .pcb-chip::after {
    right: -1.3rem;
    background-position: left 0 top 0, 0 0, 0 0;
  }
  .dark .pcb-chip::before, .dark .pcb-chip::after {
    --pcb-trace: color-mix(in srgb, oklch(76.9% 0.188 70.08) 45%, oklch(26.2% 0.051 172.552));
    @supports (color: color-mix(in lab, red, red)) {
      --pcb-trace: color-mix(in oklab, var(--color-amber-500) 45%, var(--color-emerald-950));
    }
  }
  .pcb-chip:hover::before, .pcb-chip:hover::after {
    filter: brightness(1.15);
  }
  .pcb-chip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .pcb-ref {
    flex-shrink: 0;
    font-family: var(--font-typewriter);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1em;
    color: var(--color-emerald-300);
    border: 1px solid color-mix(in srgb, oklch(76.5% 0.177 163.223) 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklab, var(--color-emerald-400) 45%, transparent);
    }
    border-radius: var(--radius-sm);
    padding: 0 calc(var(--spacing) * 1.5);
  }
  .pcb-parts {
    font-family: var(--font-typewriter);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-slate-400);
  }
  .pcb-chip-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    color: var(--color-white);
  }
  .pcb-chip:hover .pcb-chip-name {
    color: var(--color-emerald-300);
  }
  .pcb-window {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: var(--radius-sm);
    background: var(--color-slate-800);
  }
  .pcb-window img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
  }
  .pcb-chip:hover .pcb-window img {
    transform: scale(1.05);
  }
  .pcb-window-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: var(--color-slate-500);
  }
  .pcb-window-placeholder svg {
    height: 30%;
    width: 30%;
  }
  .pcb-chip-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-sm);
    color: var(--color-slate-400);
  }
  .pcb-silkscreen {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-emerald-200);
    background: color-mix(in srgb, #fff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
    font-family: var(--font-typewriter);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-emerald-800);
  }
  .pcb-silkscreen span {
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 5);
  }
  .pcb-silkscreen span + span {
    border-left: 1px solid var(--color-emerald-200);
  }
  .dark .pcb-silkscreen {
    border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
    }
    background: color-mix(in srgb, oklch(12.9% 0.042 264.695) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--color-slate-950) 70%, transparent);
    }
    color: var(--color-emerald-300);
  }
  .dark .pcb-silkscreen span + span {
    border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
    }
  }
  .note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
    margin-block: calc(var(--spacing) * 6);
  }
  .note-tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-blue-200);
    border-radius: var(--radius-md);
    background-color: var(--color-blue-50);
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
    color: var(--color-blue-800);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--text-sm--line-height);
  }
  .dark .note-tag {
    border-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-blue-400) 35%, transparent);
    }
    background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-950) 45%, transparent);
    }
    color: var(--color-blue-200);
  }
  .group-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-teal-200);
    border-radius: var(--radius-md);
    background-color: var(--color-teal-50);
    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
    color: var(--color-teal-800);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
  }
  .group-badge:hover {
    background-color: var(--color-teal-100);
  }
  .dark .group-badge {
    border-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-teal-400) 35%, transparent);
    }
    background-color: color-mix(in srgb, oklch(27.7% 0.046 192.524) 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-teal-950) 45%, transparent);
    }
    color: var(--color-teal-200);
  }
  .dark .group-badge:hover {
    background-color: color-mix(in srgb, oklch(38.6% 0.063 188.416) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-teal-900) 60%, transparent);
    }
  }
  .topic-layout {
    display: grid;
    gap: calc(var(--spacing) * 8);
  }
  .topic-feed {
    display: grid;
    gap: calc(var(--spacing) * 6);
    max-width: 60rem;
  }
  .topic-post {
    border-bottom: 1px solid var(--color-slate-200);
    display: grid;
    gap: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 6);
  }
  .topic-post-thumbnail {
    aspect-ratio: 16 / 10;
    background-color: var(--color-slate-100);
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
  .topic-post-thumbnail img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
    width: 100%;
  }
  .topic-post-thumbnail:hover img {
    transform: scale(1.03);
  }
  .topic-post-thumbnail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: var(--color-slate-400);
  }
  .topic-post-thumbnail-placeholder svg {
    height: 25%;
    width: 25%;
  }
  .dark .topic-post-thumbnail {
    background-color: var(--color-slate-800);
  }
  .dark .topic-post-thumbnail-placeholder {
    color: var(--color-slate-500);
  }
  .topic-post h2 {
    margin: 0;
    max-width: 44rem;
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--text-2xl--line-height);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
  }
  .topic-post h2 a {
    color: var(--color-slate-950);
    text-decoration: none;
  }
  .topic-post h2 a:hover {
    color: var(--color-blue-700);
  }
  .topic-post-meta {
    margin: calc(var(--spacing) * 2) 0 0;
    color: var(--color-slate-500);
    font-family: var(--font-typewriter);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }
  .topic-post-meta a {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
  }
  .topic-post-meta a:hover {
    color: var(--color-blue-700);
  }
  .topic-post-summary {
    margin: calc(var(--spacing) * 3) 0 0;
    max-width: 44rem;
    color: var(--color-slate-600);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  .topic-sidebar {
    align-self: start;
    border-top: 3px solid var(--color-slate-950);
    display: grid;
    gap: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 4);
  }
  .topic-sidebar-section {
    border-bottom: 1px solid var(--color-slate-200);
    padding-bottom: calc(var(--spacing) * 5);
  }
  .topic-sidebar h2 {
    margin: 0 0 calc(var(--spacing) * 3);
    color: var(--color-slate-950);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--text-lg--line-height);
  }
  .topic-sidebar p {
    margin: 0;
    color: var(--color-slate-600);
    font-size: var(--text-sm);
  }
  .topic-sidebar-links {
    display: grid;
    gap: calc(var(--spacing) * 3);
  }
  .topic-sidebar-links a {
    color: var(--color-slate-700);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--text-sm--line-height);
    text-decoration: none;
  }
  .topic-sidebar-links a:hover {
    color: var(--color-blue-700);
  }
  .topic-empty {
    color: var(--color-slate-600);
  }
  .dark .topic-post, .dark .topic-sidebar-section {
    border-color: var(--color-slate-800);
  }
  .dark .topic-post h2 a, .dark .topic-sidebar h2 {
    color: var(--color-white);
  }
  .dark .topic-post-summary, .dark .topic-sidebar p, .dark .topic-empty {
    color: var(--color-slate-300);
  }
  .dark .topic-post h2 a:hover, .dark .topic-sidebar-links a:hover {
    color: var(--color-blue-300);
  }
  .dark .topic-sidebar {
    border-top-color: var(--color-white);
  }
  .dark .topic-sidebar-links a {
    color: var(--color-slate-200);
  }
  .dark .topic-post-meta {
    color: var(--color-slate-400);
  }
  .dark .topic-post-meta a:hover {
    color: var(--color-blue-300);
  }
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    font-family: var(--font-typewriter);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
  }
  .pagination-link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    min-width: calc(var(--spacing) * 10);
    justify-content: center;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    color: var(--color-slate-700);
    text-decoration: none;
  }
  a.pagination-link:hover {
    border-color: var(--color-blue-300);
    color: var(--color-blue-700);
  }
  .pagination-current {
    border-color: var(--color-slate-950);
    background-color: var(--color-slate-950);
    color: var(--color-white);
  }
  .pagination-ellipsis {
    padding: 0 calc(var(--spacing) * 1);
    color: var(--color-slate-400);
  }
  .dark .pagination-link {
    border-color: var(--color-slate-800);
    color: var(--color-slate-200);
  }
  .dark a.pagination-link:hover {
    border-color: var(--color-blue-400);
    color: var(--color-blue-300);
  }
  .dark .pagination-current {
    border-color: var(--color-white);
    background-color: var(--color-white);
    color: var(--color-slate-950);
  }
  .dark .pagination-ellipsis {
    color: var(--color-slate-500);
  }
  .series-pagination {
    display: grid;
    gap: calc(var(--spacing) * 4);
    margin-top: calc(var(--spacing) * 10);
    padding-top: calc(var(--spacing) * 6);
    border-top: 1px solid var(--color-slate-200);
  }
  .series-pagination-link {
    display: block;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-slate-200);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    color: var(--color-slate-950);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
  }
  .series-pagination-link:hover {
    border-color: var(--color-blue-300);
    color: var(--color-blue-700);
  }
  .series-pagination-link span {
    display: block;
    margin-bottom: calc(var(--spacing) * 1);
    color: var(--color-slate-500);
    font-family: var(--font-typewriter);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }
  .series-pagination-next {
    text-align: right;
  }
  .dark .series-pagination {
    border-color: var(--color-slate-800);
  }
  .dark .series-pagination-link {
    border-color: var(--color-slate-800);
    color: var(--color-white);
  }
  .dark .series-pagination-link:hover {
    border-color: var(--color-blue-400);
    color: var(--color-blue-300);
  }
  .dark .series-pagination-link span {
    color: var(--color-slate-400);
  }
  @media (width >= 40rem) {
    .series-pagination {
      grid-template-columns: 1fr 1fr;
    }
    .series-pagination-prev {
      grid-column: 1;
    }
    .series-pagination-next {
      grid-column: 2;
    }
  }
  @media (width >= 48rem) {
    .index-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .recent-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .topic-layout {
      grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
      align-items: start;
    }
    .topic-post:has(.topic-post-thumbnail) {
      grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
      align-items: start;
    }
  }
  @media (width >= 64rem) {
    .recent-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@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-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  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-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --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-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}