/*! tailwindcss v4.1.17 | 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, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-zinc-500: oklch(55.2% 0.016 285.938);
    --color-stone-800: oklch(26.8% 0.007 34.298);
    --spacing: 0.25rem;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --leading-tight: 1.25;
    --leading-loose: 1.7;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-dark: #131314;
    --color-light: #f4eded;
    --color-mid: #2b241d;
    --font-base: Garamond, serif;
    --font-heading: 'BebasNeue', sans-serif;
    --font-special: 'MrDafoe', cursive;
    --font-rock: 'Rock Salt', cursive;
    --font-marker: 'Permanent Marker', cursive;
    --size-step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
    --size-step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
    --size-step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --size-step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
    --size-step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
    --size-step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
    --size-step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
    --size-step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
    --size-step-6: clamp(3.3592rem, 2.7828rem + 2.5621vw, 4.7684rem);
    --size-step-7: clamp(4.0311rem, 3.2418rem + 3.508vw, 5.9605rem);
    --size-step-8: clamp(4.8373rem, 3.7682rem + 4.7514vw, 7.4506rem);
    --size-step-9: clamp(5.8048rem, 4.3695rem + 6.379vw, 9.3132rem);
    --size-step-10: clamp(6.9657rem, 5.0529rem + 8.5015vw, 11.6415rem);
    --text-step--1: var(--size-step--1);
    --text-step-0: var(--size-step-0);
    --text-step-1: var(--size-step-1);
    --text-step-4: var(--size-step-4);
    --text-step-6: var(--size-step-6);
    --text-step-7: var(--size-step-7);
    --text-step-8: var(--size-step-8);
    --text-step-10: var(--size-step-10);
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
    --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
    --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
    --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
    --gutter: var(--space-xl-2xl);
    --leading-micro: 0.85;
    --leading-flat: 1;
    --leading-fine: 1.2;
    --leading-standard: 1.4;
    --measure: 60ch;
    --transition-base: 250ms ease;
    --transition-movement: 200ms linear;
    --transition-fade: 300ms ease;
    --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
    --stroke-width: 1px;
    --stroke-color: var(--color-mid);
    --stroke-solid: var(--stroke-width) solid var(--stroke-color);
    --radius-s: 0.2rem;
    --radius-m: 0.75rem;
    --color-mode: 'light';
    --background: var(--color-light);
    --text-color: var(--color-dark);
    --icon-light: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M18 12c0-0.811-0.161-1.587-0.455-2.295-0.304-0.735-0.75-1.395-1.303-1.948-0.552-0.552-1.213-0.998-1.948-1.303-0.707-0.293-1.483-0.454-2.294-0.454s-1.587 0.161-2.295 0.455c-0.735 0.304-1.395 0.75-1.948 1.302s-0.998 1.213-1.302 1.948c-0.294 0.708-0.455 1.484-0.455 2.295s0.161 1.587 0.455 2.295c0.304 0.735 0.75 1.395 1.303 1.948 0.552 0.552 1.213 0.998 1.948 1.303 0.707 0.293 1.483 0.454 2.294 0.454s1.587-0.161 2.295-0.455c0.735-0.304 1.395-0.75 1.948-1.303s0.998-1.213 1.303-1.948c0.293-0.707 0.454-1.483 0.454-2.294zM16 12c0 0.544-0.108 1.060-0.303 1.529-0.202 0.489-0.5 0.929-0.869 1.299s-0.81 0.667-1.299 0.869c-0.469 0.195-0.985 0.303-1.529 0.303s-1.060-0.108-1.529-0.303c-0.489-0.202-0.929-0.5-1.299-0.869s-0.667-0.81-0.869-1.299c-0.195-0.469-0.303-0.985-0.303-1.529s0.108-1.060 0.303-1.529c0.202-0.489 0.5-0.929 0.869-1.299s0.81-0.667 1.299-0.869c0.469-0.195 0.985-0.303 1.529-0.303s1.060 0.108 1.529 0.303c0.489 0.202 0.929 0.5 1.299 0.869s0.667 0.81 0.869 1.299c0.195 0.469 0.303 0.985 0.303 1.529zM11 1v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 21v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM3.513 4.927l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM17.653 19.067l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM1 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM21 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM4.927 20.487l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM19.067 6.347l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z'%3E%3C/path%3E%3C/svg%3E");
    --icon-dark: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M21.996 12.882c0.022-0.233-0.038-0.476-0.188-0.681-0.325-0.446-0.951-0.544-1.397-0.219-0.95 0.693-2.059 1.086-3.188 1.162-0.696 0.047-1.399-0.027-2.077-0.226-0.656-0.192-1.29-0.501-1.874-0.932-0.655-0.484-1.181-1.074-1.575-1.729-0.409-0.68-0.676-1.432-0.792-2.206s-0.082-1.571 0.11-2.342c0.184-0.741 0.514-1.46 0.999-2.115 0.142-0.191 0.216-0.435 0.191-0.691-0.053-0.55-0.542-0.952-1.092-0.898-1.117 0.109-2.186 0.399-3.172 0.843-1.005 0.452-1.925 1.065-2.723 1.808-0.883 0.82-1.618 1.801-2.159 2.901-0.523 1.064-0.863 2.238-0.978 3.485-0.125 1.347 0.024 2.658 0.402 3.878 0.392 1.266 1.031 2.431 1.863 3.433s1.86 1.843 3.033 2.461c1.13 0.595 2.392 0.982 3.739 1.106s2.659-0.025 3.878-0.403c1.266-0.392 2.431-1.031 3.433-1.863s1.843-1.86 2.461-3.033c0.595-1.13 0.982-2.392 1.106-3.739zM19.567 14.674c-0.126 0.351-0.276 0.689-0.447 1.014-0.493 0.937-1.166 1.76-1.969 2.427s-1.735 1.178-2.747 1.491c-0.973 0.302-2.021 0.421-3.102 0.321s-2.089-0.41-2.99-0.884c-0.937-0.493-1.76-1.166-2.427-1.969s-1.178-1.735-1.491-2.747c-0.302-0.973-0.421-2.021-0.321-3.102 0.092-1 0.365-1.938 0.782-2.786 0.43-0.878 1.018-1.661 1.725-2.319 0.64-0.595 1.377-1.086 2.183-1.449 0.179-0.081 0.362-0.155 0.548-0.223-0.092 0.257-0.171 0.516-0.236 0.778-0.256 1.029-0.302 2.091-0.147 3.121s0.51 2.032 1.056 2.941c0.527 0.875 1.23 1.663 2.1 2.306 0.775 0.573 1.622 0.986 2.5 1.243 0.907 0.266 1.846 0.364 2.772 0.302 0.752-0.050 1.496-0.207 2.21-0.465z'%3E%3C/path%3E%3C/svg%3E");
    --icon-dark-filter: invert(0.5);
    --button-color: var(--color-light);
    --button-icon: var(--icon-dark);
    --button-icon-filter: var(--icon-dark-filter);
  }
}
@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 {
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .my-10 {
    margin-block: calc(var(--spacing) * 10);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-x-0 {
    column-gap: calc(var(--spacing) * 0);
  }
  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .rounded-m {
    border-radius: var(--radius-m);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-3 {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  .border-dotted {
    --tw-border-style: dotted;
    border-style: dotted;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-t-slate-500 {
    border-top-color: var(--color-slate-500);
  }
  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }
  .bg-slate-950 {
    background-color: var(--color-slate-950);
  }
  .bg-stone-800 {
    background-color: var(--color-stone-800);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .font-base {
    font-family: var(--font-base);
  }
  .font-heading {
    font-family: var(--font-heading);
  }
  .font-marker {
    font-family: var(--font-marker);
  }
  .font-rock {
    font-family: var(--font-rock);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .font-special {
    font-family: var(--font-special);
  }
  .text-step--1 {
    font-size: var(--text-step--1);
  }
  .text-step-0 {
    font-size: var(--text-step-0);
  }
  .text-step-1 {
    font-size: var(--text-step-1);
  }
  .text-step-4 {
    font-size: var(--text-step-4);
  }
  .text-step-6 {
    font-size: var(--text-step-6);
  }
  .text-step-7 {
    font-size: var(--text-step-7);
  }
  .text-step-8 {
    font-size: var(--text-step-8);
  }
  .text-step-10 {
    font-size: var(--text-step-10);
  }
  .leading-\[0\.8\] {
    --tw-leading: 0.8;
    line-height: 0.8;
  }
  .leading-flat {
    --tw-leading: var(--leading-flat);
    line-height: var(--leading-flat);
  }
  .leading-loose {
    --tw-leading: var(--leading-loose);
    line-height: var(--leading-loose);
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .text-blue-700 {
    color: var(--color-blue-700);
  }
  .text-green-700 {
    color: var(--color-green-700);
  }
  .text-light {
    color: var(--color-light);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-yellow-600 {
    color: var(--color-yellow-600);
  }
  .italic {
    font-style: italic;
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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);
  }
  .shadow-zinc-500 {
    --tw-shadow-color: oklch(55.2% 0.016 285.938);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-zinc-500) var(--tw-shadow-alpha), transparent);
    }
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .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,);
  }
  .hover\:text-blue-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
  }
  .hover\:text-green-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-green-700);
      }
    }
  }
  .hover\:text-red-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-700);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
}
@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
    margin-block: 0;
  }
  ul[role='list'], ol[role='list'] {
    list-style: none;
  }
  body {
    min-height: 100vh;
    line-height: 1.5;
  }
  h1, h2, h3, h4, button, input, label {
    line-height: 1.1;
  }
  h1, h2, h3, h4 {
    text-wrap: balance;
  }
  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }
  img, picture {
    max-width: 100%;
    display: block;
  }
  input, button, textarea, select {
    font: inherit;
  }
  textarea:not([rows]) {
    min-height: 10em;
  }
  :target {
    scroll-margin-block: 5ex;
  }
  @font-face {
    font-family: "Garamond";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/EBGaramond-VariableFont_wght.ttf");
  }
  @font-face {
    font-family: "BebasNeue";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/BebasNeue-Regular.ttf");
  }
  @font-face {
    font-family: "MrDafoe";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/MrDafoe-Regular.ttf");
  }
  @font-face {
    font-family: "Permanent Marker";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/PermanentMarker-Regular.ttf");
  }
  @font-face {
    font-family: "Rock Salt";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/RockSalt-Regular.ttf");
  }
  body {
    color: var(--text-color);
    background: var(--background);
    font-size: var(--size-step-1);
    font-family: var(--font-base);
    line-height: var(--leading-standard);
    font-size-adjust: from-font;
  }
  :is(h1, h2, h3, h4) {
    line-height: var(--leading-fine);
    text-wrap: balance;
    font-family: var(--font-heading);
  }
  :is(h1, h2, h3, h4):where( [class*="text-step-8"], [class*="text-step-9"], [class*="text-step-10"] ) {
    line-height: var(--leading-micro);
    font-weight: var(--font-black);
  }
  h1 {
    font-size: var(--size-step-6);
    max-width: 20ch;
  }
  h2 {
    font-size: var(--size-step-5);
    max-width: 35ch;
  }
  h3 {
    font-size: var(--size-step-4);
    max-width: 35ch;
  }
  :is(h4, h5, h6) {
    font-size: var(--size-step-3);
  }
  small {
    font-size: var(--size-step-0);
  }
  ins {
    text-decoration: none;
    background: var(--color-primary);
    color: var(--color-dark);
    padding-inline: 0.3em;
  }
  :is(code, kbd, samp) {
    font-family: var(--font-mono);
    padding: 0.2em 0.2em 0.05em 0.2em;
    hyphens: none;
    tab-size: 2;
    text-align: left;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    box-decoration-break: clone;
  }
  @supports not (font-size-adjust: from-font) {
    :is(code, kbd, samp) {
      font-size: 0.8em;
    }
  }
  pre:has(code) {
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
  }
  pre code {
    border: none;
    background: none;
    padding: 0;
  }
  kbd {
    border: 1px solid;
    padding-block-end: 0.1em;
  }
  var {
    font-style: normal;
    font-weight: var(--font-medium);
  }
  q {
    font-style: italic;
  }
  ul:not(.navigation, .list-override) {
    padding-inline-start: 1.7ch;
    list-style-type: disc;
  }
  ul:not(.navigation, .list-override) > li {
    padding-inline-start: var(--space-xs);
  }
  :is(ol, ul):not(.navigation, .list-override) li + * {
    margin-block-start: var(--space-3xs);
  }
  ul ::marker {
    font-size: 0.8lh;
  }
  ol ::marker {
    font-size: 1em;
    font-weight: var(--font-bold);
  }
  [role="list"][class], [role="tablist"][class] {
    margin-block: 0;
    padding: 0;
  }
  dt {
    font-weight: var(--font-medium);
  }
  dt + dd {
    margin-block-start: var(--space-xs);
  }
  dd + dt {
    margin-block-start: var(--space-s);
  }
  dd {
    margin-inline-start: 1.5ch;
  }
  blockquote {
    margin-inline: 0;
    color: var(--color-light);
  }
  blockquote footer {
    margin-block-start: var(--space-s);
    color: var(--color-primary);
    font-size: var(--size-step-0);
  }
  blockquote q {
    font-style: normal;
  }
  :is(video, iframe[src*="youtube"], iframe[src*="vimeo"]) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  img {
    height: auto;
    max-width: 100%;
    display: block;
  }
  figcaption {
    padding-block-start: 0.5em;
    font-size: var(--size-step-0);
    font-family: monospace;
  }
  table {
    border: var(--stroke);
    border-collapse: collapse;
    width: 100%;
  }
  th {
    text-align: left;
    font-weight: var(--font-bold);
    line-height: var(--leading-fine);
  }
  thead th {
    padding-block: var(--space-s);
  }
  td, th {
    padding: var(--space-xs) var(--space-s);
  }
  th:not(:only-of-type) {
    border-block-end: var(--stroke);
  }
  th:only-of-type {
    border-inline-end: var(--stroke);
  }
  :is(th, td) ~ :is(th, td) {
    border-inline-start: var(--stroke);
  }
  tr + tr :is(th, td) {
    border-block-start: var(--stroke);
  }
  caption {
    caption-side: bottom;
    margin-block-start: var(--space-s);
  }
  a:not([class]):hover {
    text-underline-offset: 0.2lh;
  }
  :is(h1, h2, h3, h4) a:not([class]) {
    text-decoration-thickness: 0.1ex;
    text-underline-offset: 0.2ex;
  }
  :is(h1, h2, h3, h4) a:not([class]):hover {
    text-underline-offset: 0.3ex;
  }
  :focus {
    outline: none;
  }
  :focus-visible {
    outline: 2px solid var(--focus-color, currentColor);
    outline-offset: var(--focus-offset, 0.2lh);
  }
  @supports (-moz-appearance: none) {
    :root {
      --focus-offset: 0.08em;
    }
  }
  :target {
    scroll-margin-block: 5lh;
  }
  ::selection {
    color: var(--color-light);
    background: var(--color-dark);
  }
  hr {
    border: none;
    border-block-start: var(--hr-stroke, var(--stroke));
    margin-block: var(--flow-space, var(--space-xl));
  }
  svg:not([class]) {
    width: auto;
    height: 1lh;
  }
  svg {
    flex-shrink: 0;
  }
  svg[role="img"][width][height] {
    width: revert;
    height: revert;
    background: var(--color-light);
    padding: var(--space-xs);
  }
  form > * + * {
    margin-top: var(--flow-space, 1rem);
  }
  :is(input, select, textarea) {
    accent-color: var(--color-primary);
  }
  :is( input:not([type="checkbox"], [type="radio"], [type="color"]), select, textarea ) {
    padding: 0.5em 0.8em;
    border-radius: var(--radius-s);
    border: var(--stroke-solid);
    background: var(--color-dark-glare);
    color: var(--color-light);
    width: 100%;
    &::placeholder {
      color: var(--color-mid);
    }
  }
  label {
    line-height: var(--leading-fine);
    font-weight: var(--font-medium);
  }
  label::after {
    content: "\A";
    white-space: pre;
  }
  label:has(input) {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);
    font-weight: var(--font-normal);
  }
  label:has(input) + label:has(input) {
    --flow-space: var(--space-s-m);
  }
  label:has(input) input {
    transform: translateY(-0.1ex);
  }
  input:disabled {
    background: var(--color-mid);
  }
  input:disabled, label input:disabled + * {
    cursor: not-allowed;
  }
  fieldset {
    border: var(--stroke);
    padding: var(--space-s);
  }
  legend {
    font-weight: var(--font-medium);
    padding-inline: var(--space-xs);
  }
  summary {
    font-weight: var(--font-bold);
    cursor: pointer;
  }
  details[open] summary {
    margin-block-end: var(--space-s);
  }
}
@layer components {
  .box {
    --box-padding: var(--space-l);
    padding: var(--box-padding);
    border: var(--stroke-solid);
    color: var(--color-dark);
    background-color: var(--color-light);
  }
  .box * {
    color: inherit;
  }
  .box.invert {
    color: var(--color-light);
    background-color: var(--color-dark);
  }
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter, var(--space-m));
    justify-content: var(--cluster-horizontal-alignment, flex-start);
    align-items: var(--cluster-vertical-alignment, center);
    &[data-justify='flex-end'] {
      justify-content: flex-end;
    }
    &[data-justify='space-between'] {
      justify-content: space-between;
    }
  }
  .cover {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    padding: 1rem;
  }
  .cover > * {
    margin-block: 1rem;
  }
  .cover > :first-child:not(.primary) {
    margin-block-start: 0;
  }
  .cover > :last-child:not(.primary) {
    margin-block-end: 0;
  }
  .cover > .primary {
    margin-block: auto;
  }
  .frame {
    --n: 16;
    --d: 9;
    aspect-ratio: var(--n) / var(--d);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .frame > img, .frame > video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat( var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr) );
    gap: var(--gutter, var(--space-l));
  }
  .grid[data-layout='50-50'] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(16rem, 50vw, 33rem);
  }
  .grid[data-layout='thirds'] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(16rem, 33%, 20rem);
  }
  .imposter {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
  }
  .imposter.contain {
    --margin: 0px;
    overflow: auto;
    max-inline-size: calc(100% - (var(--margin) * 2));
    max-block-size: calc(100% - (var(--margin) * 2));
  }
  .imposter[data-position='fixed'] {
    position: fixed;
  }
  .reel {
    display: flex;
    block-size: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: var(--color-light, #fff) var(--color-dark, #000);
  }
  .reel::-webkit-scrollbar {
    block-size: 1rem;
  }
  .reel::-webkit-scrollbar-track {
    background-color: var(--color-dark, #000);
  }
  .reel::-webkit-scrollbar-thumb {
    background-color: var(--color-dark, #000);
    background-image: linear-gradient( #000 0, #000 0.25rem, #fff 0.25rem, #fff 0.75rem, #000 0.75rem );
  }
  .reel > * {
    flex: 0 0 auto;
  }
  .reel > img {
    block-size: 100%;
    flex-basis: auto;
    width: auto;
  }
  .reel > * + * {
    margin-inline-start: 1rem;
  }
  .reel.overflowing {
    padding-block-end: 1rem;
  }
  .stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .stack > * {
    margin-block: 0;
  }
  .stack > * + * {
    margin-block-start: var(--space, 1.5rem);
  }
  .stack[data-stack='zero'] > * + * {
    margin-block-start: 0rem;
  }
  .stack[data-stack='small'] > * + * {
    margin-block-start: 0.5rem;
  }
  .stack[data-stack='large'] > * + * {
    margin-block-start: 3rem;
  }
  .sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter, var(--space-s-l));
  }
  .sidebar:not([data-direction]) > :first-child {
    flex-basis: var(--sidebar-target-width, 20rem);
    flex-grow: 1;
  }
  .sidebar:not([data-direction]) > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-width: var(--sidebar-content-min-width, 60%);
  }
  .sidebar[data-reversed] {
    flex-direction: row-reverse;
  }
  .sidebar[data-direction='rtl'] > :last-child {
    flex-basis: var(--sidebar-target-width, 20rem);
    flex-grow: 1;
  }
  .sidebar[data-direction='rtl'] > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-width: var(--sidebar-content-min-width, 50%);
  }
  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter, var(--space-lg));
    align-items: var(--switcher-vertical-alignment, flex-start);
  }
  .switcher > * {
    flex-grow: 1;
    flex-basis: calc( (var(--switcher-target-container-width, 40rem) - 100%) * 999 );
  }
  .switcher > :nth-last-child(n + 4), .switcher > :nth-last-child(n + 4) ~ * {
    flex-basis: 100%;
  }
  .garden {
    & .card {
      transition: transform 0.2s ease;
      &:hover {
        transform: scale(1.05) translateX(-10px) translateY(-10px);
      }
      & a {
        transition: color 500ms;
        &:hover {
          color: var(--link-color, red);
        }
      }
    }
  }
  .glitch-small {
    text-shadow: 0.1ch 0.075ch 0 #ff0000, -0.1ch -0.075ch #00ffff;
  }
  .glitch-large {
    text-shadow: 0.2ch 0.125ch 0 #ff0000, -0.2ch -0.125ch #00ffff;
  }
  .navigation {
    --gutter: var(--space-xs, 1em);
    & a {
      font-family: var(--font-heading);
      font-size: var(--size-step-4);
      text-decoration: none;
      &[data-state='active'] {
        text-shadow: 0.2ch 0.125ch 0 #ff0000, -0.2ch -0.125ch #00ffff;
      }
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .prose {
    --flow-space: var(--space-l);
  }
  .prose :is(h1, h2, h3) {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .prose :is(p, li, dl, figcaption, blockquote) {
    max-width: 60ch;
    text-wrap: pretty;
  }
  .prose :is(h1, h2, h3, h4) + *:not([class]) {
    --flow-space: var(--space-m);
  }
  .prose :is(figure, table), .prose :is(figure, table) + * {
    --flow-space: var(--space-2xl);
  }
  .prose * + :is(h1, h2, h3, h4):not([class]) {
    --flow-space: var(--space-xl);
  }
  .prose :is(ul, ol):not([class]) li + li, .prose :is(ul, ol):not([class]) li > :is(ol, ul) {
    --flow-space: var(--space-3xs);
  }
  .prose hr {
    --flow-space: var(--space-2xl);
  }
  .prose :is(img, picture, video) {
    border: var(--stroke-solid);
  }
  @media screen(md) {
    .prose :is(h1, h2, h3) {
      overflow-wrap: unset;
      hyphens: unset;
    }
  }
  .site-foot {
    margin-block-end: var(--space-xl, 1em);
    margin-block-start: var(--space-xl, 1em);
  }
  .site-head {
    --cluster-horizontal-alignment: flex-end;
    margin-block-end: var(--space-xl, 1em);
    margin-block-start: var(--space-sm, 1em);
  }
  code[class*='language-'], pre[class*='language-'] {
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    color: #eee;
    background: #2f2f2f;
    font-family: Roboto Mono, monospace;
    font-size: 1em;
    line-height: 1.5em;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }
  code[class*='language-']::-moz-selection, pre[class*='language-']::-moz-selection, code[class*='language-'] ::-moz-selection, pre[class*='language-'] ::-moz-selection {
    background: #363636;
  }
  code[class*='language-']::selection, pre[class*='language-']::selection, code[class*='language-'] ::selection, pre[class*='language-'] ::selection {
    background: #363636;
  }
  :not(pre) > code[class*='language-'] {
    white-space: normal;
    border-radius: 0.2em;
    padding: 0.1em;
  }
  pre[class*='language-'] {
    overflow: auto;
    position: relative;
    margin: 0.5em 0;
    padding: 1.25em 1em;
  }
  .language-css > code, .language-sass > code, .language-scss > code {
    color: #fd9170;
  }
  [class*='language-'] .namespace {
    opacity: 0.7;
  }
  .token.atrule {
    color: #c792ea;
  }
  .token.attr-name {
    color: #ffcb6b;
  }
  .token.attr-value {
    color: #a5e844;
  }
  .token.attribute {
    color: #a5e844;
  }
  .token.boolean {
    color: #c792ea;
  }
  .token.builtin {
    color: #ffcb6b;
  }
  .token.cdata {
    color: #80cbc4;
  }
  .token.char {
    color: #80cbc4;
  }
  .token.class {
    color: #ffcb6b;
  }
  .token.class-name {
    color: #f2ff00;
  }
  .token.comment {
    color: #616161;
  }
  .token.constant {
    color: #c792ea;
  }
  .token.deleted {
    color: #ff6666;
  }
  .token.doctype {
    color: #616161;
  }
  .token.entity {
    color: #ff6666;
  }
  .token.function {
    color: #c792ea;
  }
  .token.hexcode {
    color: #f2ff00;
  }
  .token.id {
    color: #c792ea;
    font-weight: bold;
  }
  .token.important {
    color: #c792ea;
    font-weight: bold;
  }
  .token.inserted {
    color: #80cbc4;
  }
  .token.keyword {
    color: #c792ea;
  }
  .token.number {
    color: #fd9170;
  }
  .token.operator {
    color: #89ddff;
  }
  .token.prolog {
    color: #616161;
  }
  .token.property {
    color: #80cbc4;
  }
  .token.pseudo-class {
    color: #a5e844;
  }
  .token.pseudo-element {
    color: #a5e844;
  }
  .token.punctuation {
    color: #89ddff;
  }
  .token.regex {
    color: #f2ff00;
  }
  .token.selector {
    color: #ff6666;
  }
  .token.string {
    color: #a5e844;
  }
  .token.symbol {
    color: #c792ea;
  }
  .token.tag {
    color: #ff6666;
  }
  .token.unit {
    color: #fd9170;
  }
  .token.url {
    color: #ff6666;
  }
  .token.variable {
    color: #ff6666;
  }
  .token.command {
    color: #c792ea;
  }
  .tags-list {
    margin: 0;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --color-mode: 'dark';
    }
    :root:not([data-user-color-scheme]) {
      --background: var(--color-dark);
      --text-color: var(--color-light);
      --button-icon: var(--icon-light);
      --button-color: var(--color-dark);
    }
  }
  [data-user-color-scheme='dark'] {
    --color-mode: 'dark';
    --background: var(--color-dark);
    --text-color: var(--color-light);
    --button-icon: var(--icon-light);
    --button-color: var(--color-dark);
  }
  @media (scripting: none) {
    .toggle {
      display: none;
    }
  }
  .toggle-button {
    background: var(--background);
    border: none;
    color: var(--text-color);
    display: inline-flex;
    &:hover {
      cursor: pointer;
    }
  }
  .toggle-button__icon {
    background: var(--button-icon);
    width: 1.2em;
    height: 1.2em;
    transform: translateY(1px);
    transition: filter 500ms ease-in-out;
  }
  .toggle-button:focus {
    outline: none;
  }
}
@layer utilities {
  .center {
    --center-text-align: flex-start;
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--measure);
    text-align: var(--center-text-align);
  }
  .center[data-center='intrinsic'] {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .flow > * + * {
    margin-top: var(--flow-space, 1em);
  }
  .region {
    padding-block: var(--region-space, var(--space-3xl));
    position: relative;
  }
  .visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }
  .wrapper {
    max-width: var(--wrapper-max-width, 85rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    position: relative;
  }
}
@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-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;
}
@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-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;
    }
  }
}