/*! tailwindcss v4.0.3 | MIT License | https://tailwindcss.com */
@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-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --breakpoint-xs: 30rem;
    --breakpoint-sm: 40rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;
    --text-9xl: 8rem;
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans-font-feature-settings);
    --default-font-variation-settings: var(--font-sans-font-variation-settings);
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(--font-mono-font-feature-settings);
    --default-mono-font-variation-settings: var(--font-mono-font-variation-settings);
    --color-gray-50: oklch(0.985 0.002 247.839);
    --color-gray-100: oklch(0.967 0.003 264.542);
    --color-gray-200: oklch(0.928 0.006 264.531);
    --color-gray-300: oklch(0.872 0.01 258.338);
    --color-gray-400: oklch(0.707 0.022 261.325);
    --color-gray-500: oklch(0.551 0.027 264.364);
    --color-gray-600: oklch(0.446 0.03 256.802);
    --color-gray-700: oklch(0.373 0.034 259.733);
    --color-gray-800: oklch(0.278 0.033 256.848);
    --color-gray-900: oklch(0.21 0.034 264.665);
    --color-gray-950: oklch(0.13 0.028 261.692);

    --color-primary: var(--theme-main-text-color);
    --color-primary-inverted: var(--theme-inverted-text-color);
    --color-primary-lighter: var(--theme-primary-color-light);
    --color-primary-darker: var(--theme-primary-color-dark);
    --color-container: var(--theme-main-bg-color);
    --color-article: var(--border-color-article);
    --color-code: var(--theme-bg-code);
    --color-theme-code: var(--theme-inverted-text-color);
    --color-button: var(--border-color-button);
    --color-button-primary: var(--theme-primary-color);
  }
}
@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);
    -webkit-tap-highlight-color: transparent;
  }
  body {
    line-height: inherit;
  }
  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;
  }
  :is(article, aside, nav, section) :is( h1, h2, h3, h4) {
    margin-block: 0;
  }
  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;
    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;
  }
  :-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 {
  .hidden {
    display: none;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .line-clamp-none {
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: unset;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@layer components {
  .min-h-11 {
    min-height: 44px;
  }
  .form-input, .form-textarea, .form-select, .form-multiselect {
    appearance: none;
    background-color: #fff;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .icon-inline {
    block-size: calc(var(--spacing) * 5);
    inline-size: calc(var(--spacing) * 5);
    margin-block: auto;
  }
  .icon-xs {
    block-size: calc(var(--spacing) * 5);
    inline-size: calc(var(--spacing) * 5);
  }
  .icon-sm {
    block-size: calc(var(--spacing) * 6);
    inline-size: calc(var(--spacing) * 6);
  }
  .icon-md {
    block-size: calc(var(--spacing) * 8);
    inline-size: calc(var(--spacing) * 8);
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
}
:root {
  --layout-padding: clamp(0.375em, 1.75vw, 1.5em);
  --layout-spacing: clamp(0.5ex, 1.5vi, 1ex);
  --theme-main-bg-color: oklch(98.51% 0 0);
  --theme-main-text-color: oklch(11.49% 0 0);
  --theme-inverted-text-color: oklch(92% 0 0);
  --border-color-default: #ebedec;
  --border-color-article: #c6ccc8;
  --border-color-button: #c6ccc8;
  --color-secondary-default: #efefef;
  --theme-input-color: oklch(11.49% 0 0);
  --theme-primary-color: #00bd0f;
  --theme-primary-color-light: #00bd0f;
  --theme-primary-color-dark: #008300;
  --theme-gradient-dark: #008300;
  --theme-gradient: #00bd0f;
  --theme-gradient-light: #00bd0f;
  --color-code-background: #282c34;
  --theme-accent-color: #fff700;
  @media (color-gamut: p3) {
    @supports (background: oklch(0 0 0)) {
      --theme-gradient-light: oklch(84.88% 0.36852781063661505 145.64495037017772);
      --theme-gradient: oklch(68.43% 0.36852781063661505 145.64495037017772);
      --theme-gradient-dark: oklch(51.98% 0.36852781063661505 145.64495037017772);
    }
  }
  @media (prefers-color-scheme: dark) {
    --theme-main-bg-color: oklch(29.25% 0.016 264.3);
    --theme-main-text-color: oklch(92% 0 0);
    --theme-inverted-text-color: oklch(11.49% 0 0);
    --border-color-default: #141414;
    --border-color-article: #393337;
    --border-color-button: #c6ccc8;
    --color-secondary-default: #c6bcbc;
    --color-code-background: #fafafa;
  }
}
@property --gradient-start {
  syntax: "<color>";
  inherits: false;
  initial-value: #00fb29;
}
@property --gradient-middle {
  syntax: "<color>";
  inherits: false;
  initial-value: #00bd0f;
}
@property --gradient-end {
  syntax: "<color>";
  inherits: false;
  initial-value: #008300;
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
}
h1,h2,h3,h4,h5,h6 {
  text-align: left;
  line-height: 1.25;
  text-wrap: balance;
}
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.125em;
}
h3 {
  font-size: 1.875em;
  font-weight: 600;
}
h4 {
  font-size: 1.5em;
  font-weight: 600;
}
h5 {
  font-size: 1.25em;
  font-weight: 500;
}
h6 {
  font-size: 1em;
  font-weight: 500;
}
[type="text"], input:where(:not([type])), [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], [multiple], textarea, select {
  color: var(--theme-input-color);
  background-color: var(--color-secondary-default);
  border-color: var(--border-color-button);
  border-radius: 0.25rem;
}
form, fieldset {
  & label {
    color: var(--theme-main-text-color);
  }
}
.form-input, .form-email, .form-select, .form-multiselect, .form-textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  --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);
  &:focus {
    border-color: var(--color-gray-300);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: rgb(255 255 255 / 50%);
    --tw-outline-style: none;
    outline-style: none;
    --tw-ring-inset: inset;
  }
}
form, fieldset {
  .form-list {
    display: flex;
    max-width: 64ch;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    li {
      width: 100%;
      @media (width >= 48rem) {
        width: calc(3/4 * 100%);
      }
    }
  }
  .field {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .field.field-reserved {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .field.field-reserved ul:last-of-type {
    margin-bottom: calc(var(--spacing) * -6);
    padding-bottom: calc(var(--spacing) * 1);
  }
  .field.field-reserved ul {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
  }
  .field.choice {
    display: flex;
    align-items: center;
  }
  .field.choice input {
    margin-right: calc(var(--spacing) * 4);
  }
  .field.choice label {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .field.field-error .messages {
    max-width: fit-content;
    color: var(--color-red-600);
  }
  legend {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    color: var(--color-primary);
  }
  legend + br {
    display: none;
  }
}
fieldset ~ fieldset {
  margin-top: calc(var(--spacing) * 8);
}
@layer components {
  .btn {
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-button);
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 1rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    svg {
      display: inline-flex;
      aspect-ratio: 1 / 1;
    }
    &:hover {
      border-color: var(--color-button-primary);
      background-color: var(--color-button-primary);
      color: var(--color-white);
    }
    &:focus {
      border-color: transparent;
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .btn-search {
    position: absolute;
    top: calc(var(--spacing) * 0);
    right: calc(var(--spacing) * 0);
    margin: calc(var(--spacing) * 0);
    display: flex;
    aspect-ratio: 1 / 1;
    height: 100%;
    justify-content: center;
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: calc(var(--spacing) * 0);
    color: var(--color-black);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    .icon {
      height: calc(var(--spacing) * 5);
      width: calc(var(--spacing) * 5);
    }
  }
  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
    &:hover {
      background-color: var(--color-primary-lighter);
      color: var(--color-white);
      --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);
    }
  }
  .btn-secondary {
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-primary-lighter);
    background-color: var(--color-white);
    color: var(--color-black);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
    &:hover {
      border-color: var(--color-primary-darker);
      background-color: var(--color-white);
      --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);
    }
    &:focus {
      border-style: var(--tw-border-style);
      border-width: 2px;
      border-color: transparent;
    }
  }
}
.page-header {
  position: relative;
  z-index: 1;
}
.base-block {
  padding-inline: var(--layout-padding);
}
body {
  background-color: var(--color-container);
  color: var(--color-primary);
}
.wrapper {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  row-gap: 1rem;
  margin-inline: auto;
  width: 100%;
  max-width: 80rem;
  min-height: 100dvh;

  @media (width >= 48rem) {
    grid-template-columns: 15rem 2fr 1fr;
    column-gap: calc(2.1vw + 1.5rem);
  }

  .logo, h1, h2 {
    --gradient-start: var(--theme-gradient-dark);
    --gradient-middle: var(--theme-gradient);
    --gradient-end: var(--theme-gradient-light);
    margin-bottom: 0.5ex;
    @media (prefers-color-scheme: dark) {
      --gradient-start: var(--theme-gradient-light);
      --gradient-end: var(--theme-gradient-dark);
    }
    width: fit-content;
    background: linear-gradient(83deg, var(--gradient-start), var(--gradient-start), var(--gradient-middle), var(--gradient-end), var(--gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: --gradient-start 1s, --gradient-end 1s;
    &:hover {
      --gradient-start: var(--theme-gradient-light);
      --gradient-end: var(--theme-gradient-dark);
      @media (prefers-color-scheme: dark) {
        --gradient-start: var(--theme-gradient-dark);
        --gradient-end: var(--theme-gradient-light);
      }
    }
  }
  .title-home {
    display: inline;
    font-size: 1em;
    margin: 0;
    .logo em {
      margin-top: calc(var(--spacing) * -5);
      margin-right: calc(var(--spacing) * 5.5);
    }
  }
}
.main-header {
  position: sticky;
  top: calc(var(--spacing) * 0);
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background-color: var(--color-container);
  padding-top: calc(var(--spacing) * 2);
  font-size: 0.625rem;

  @media (width >= 48rem) {
    position: relative;
    grid-column: span 3 / span 3;
    justify-content: flex-start;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 1rem;
  }

  .logo {
    position: relative;
    display: flex;
    height: 3.333ex;
    max-width: 164px;
    flex-wrap: wrap;
    font-size: 3em;
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);

    @media (width >= 48rem) {
      margin-bottom: 0.5ex;
      max-width: 246px;
    }

    span {
      display: inline-block;
    }

    em {
      margin-top: calc(var(--spacing) * -7);
      margin-right: calc(var(--spacing) * 6);
      margin-left: auto;
      display: inline-block;
      font-style: normal;
    }
  }
  .menu-toggle {
    position: absolute;
    top: calc(var(--spacing) * 3);
    left: calc(var(--spacing) * 4);
    display: flex;
    height: fit-content;
    width: fit-content;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 0.5);

    @media (width >= 48rem) {
      display: none;
    }
  }
}

.main-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);

  @media (width >= 48rem) {
    grid-column: span 3 / span 3;
  }

  .copyright {
    font-size: 0.875em;
    column-gap: calc(var(--spacing) * 2);
    margin-inline-start: auto;
  }
}
article {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 100%;
  row-gap: calc(var(--spacing) * 0);

  @media (width >= 48rem) {
    grid-column: 2 / span 2;
    grid-template-columns: 2fr 1fr;
    column-gap: calc(var(--spacing) * 4);
  }

  & > header {
    margin-bottom: calc(var(--spacing) * 6);
    container-type: inline-size;
  }

  & > section {
    margin-bottom: calc(var(--spacing) * 4);
    display: grid;
    width: 100%;
    grid-template-columns: 100%;
    row-gap: calc(var(--spacing) * 0);

    @media (width >= 48rem) {
      grid-column: 1 / span 2;
      grid-template-columns: 2.5fr 1fr;
      column-gap: calc(var(--spacing) * 4);
    }

    & > * {
      grid-column-start: 1;
    }

    ul {
      list-style: revert;
      margin-inline-start: calc(var(--spacing) * 3);
      padding-inline-start: calc(var(--spacing) * 4);

      ::marker {
        content: '*  ';
      }
    }
  }

  baseline-status {
    border: 1px solid var(--border-color-article);
    font-size: 0.875rem;
    padding: 1rem 1rem 0;

    .name {
      font-size: 1em !important;
    }
  }

  .baseline {
    padding-block: calc(var(--spacing) * 4);
    display: grid;
    grid-template-columns: 1fr;

    @media (width >= 48rem) {
      grid-column: 1 / span 2;
      grid-template-columns: 2.5fr 1fr;
    }

    & > * {
      grid-column-start: 1;
    }

    baseline-status {
      padding-block-start: 0;
      margin-block-end: calc(var(--spacing) * 4);
    }

    h3 {
      color: var(--gradient-start);
      margin-block-end: 0.5em;
    }

    .highlight {
      grid-column: 1 / span 2;
    }
  }

  &.result-item {
    @media (width >= 48rem) {
      grid-column: 1 / span 1;
    }
  }

  & > footer {
    margin-bottom: calc(var(--spacing) * 4);
    border-style: var(--tw-border-style);
    border-width: 0px;
    text-align: start;
  }

  .highlight {
    background: var(--chroma-bg-color);
    position: relative;
    margin-block: calc(var(--spacing) * 4);

    @media (width >= 48rem) {
      grid-column: 1 / span 2;
    }

    > .chroma {
      max-width: calc(100vw - var(--spacing) * 8);
      overflow-x: auto;
      scrollbar-width: none;
      @media (width >= 64rem) {
        max-width: 100%;
      }
      border-radius: var(--radius-md);
      &::-webkit-scrollbar {
        display: none;
      }
      code {
        scrollbar-width: none;
      }
      table {
        max-width: 100%;
      }
      .lntd + .lntd {
        width: fit-content;
      }
    }
  }

  pre {
    padding: calc(var(--spacing) * 3);
    ::-webkit-scrollbar {
      display: none;
    }
    code {
      scrollbar-width: none;
    }
  }

  &.video video, &.audio audio {
    width: 100%;
  }

  p > code {
    display: inline-block;
    border: 1px solid oklch(from var(--theme-main-text-color) l c h / 25%);
    border-radius: 4px;
    padding: 0 0.5ex;
    background: rgba(117, 244, 115, 0.25);
  }
}
article .title a:hover {
    text-decoration-thickness: 1px;
    text-decoration-color: var(--gradient-end);
    text-decoration-line: underline;
}
.main {
  @media (width >= 48rem) {
    &.content {
      grid-column: 2 / span 2;
      margin-bottom: calc(var(--spacing) * 8);
    }
  }

  h1 {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: clamp(1.25rem, 2vw + 1.25rem, 2.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  h2 {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: clamp(1.25rem, 2vw + 1.25rem, 2.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  & > article {
    margin-bottom: calc(var(--spacing) * 4);
    column-gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);

    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 8);
      padding-left: calc(var(--spacing) * 0);
    }

    & > * {
      grid-column-start: 1;
    }

    header h1 {
      --tw-leading: 1.1;
      margin-bottom: calc(var(--spacing) * 3);
      line-height: 1.1;
    }
  }
  .article-meta {
    display: flex;
    flex-direction: column;
    font-size: 0.875em;
    column-gap: calc(var(--spacing) * 3);
    row-gap: calc(var(--spacing) * 2);

    .time-date {
      column-gap: calc(var(--spacing) * 3);
      row-gap: calc(var(--spacing) * 2);
    }

    .date,
    .time {
      column-gap: calc(var(--spacing) * 2);
    }

    .spacer {
      display: flex;
      width: 0;
      height: 1em;
      border-left: 1px solid;
      margin-block: auto;
    }

    & > .spacer {
      display: none;
    }

    @container (width >= 24rem) {
      flex-direction: row;

      & > .spacer {
        display: flex;
      }
    }
  }

  .search-results {
    padding: calc(var(--spacing) * 4);
  }

  .result-item mark {
    display: inline-flex;
    border: 1px solid var(--theme-accent-color);
    background: none;
    color: inherit;
    border-radius: 0.25rem;
  }

}
.metadata {
  margin-top: calc(var(--spacing) * 8);
  display: block;
  width: 100%;
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  padding-inline: calc(var(--spacing) * 0);
  padding-block: calc(var(--spacing) * 6);
  text-align: center;
  font-size: 0.75em;
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}
.sidebar {
  position: fixed;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 10;
  display: flex;
  height: 100dvh;
  width: 100vw;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  background-color: var(--color-container);
  padding-inline: min(6vw, 1rem);
  padding-block: calc(var(--spacing) * 4);
  transform: translateX(-100vw);
  transition: transform 0.55s;
  &.open {
    transform: translateX(0);
  }
  .menu-toggle {
    position: relative;
    margin-left: auto;
    display: flex;
    height: fit-content;
    width: fit-content;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 0.5);
    @media (width >= 48rem) {
      display: none;
    }
  }
  .search-box {
    position: relative;
    width: 100%;
  }
  .menu {
    margin-block: 1rem;

    .heading {
      margin-block-start: calc(var(--spacing) * 2);
    }
  }
  .navigation {
    max-width: 28ch;
    a {
      display: flex;
      text-wrap: balance;
      padding-block: 2px;
      &:hover {
        text-decoration-line: underline;
      }
    }
  }
}
@media (width >= 48rem) {
  .sidebar {
    position: static;
    z-index: 0;
    height: auto;
    width: 100%;
    background-color: var(--color-container);
    padding-right: calc(var(--spacing) * 0);
    padding-left: calc(var(--spacing) * 4);
    transform: translateX(0);
  }
}
.input {
  width: auto;
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-primary);
    --tw-outline-style: none;
    outline-style: none;
  }
  &-light {
    border-color: var(--color-gray-500);
    background-color: var(--color-white);
  }
}
.search-box {
  width: 100%;
  .form-input {
    min-height: calc(var(--spacing) * 11);
    width: 100%;
    &:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: -2px;
    }
  }
}

.dynamic-icon {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  color: var(--color-code);
}

.tags {
  display: flex;
  gap: calc(var(--spacing) * 2);
  --tw-leading: 1;
  line-height: 1;
  a {
    --gradient-start: #006200;
    --gradient-end: #007200;
    display: inline-block;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--gradient-start);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.75em;
    color: var(--color-white);
    text-transform: uppercase;
    text-decoration-line: none;
    opacity: 80%;
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end), var(--gradient-end), var(--gradient-start));
    transition: --gradient-end 1s, --gradient-start 1s;

    &:hover, &:focus, &:active {
      --gradient-start: #007200;
      --gradient-end: #009200;
      border-color: var(--gradient-start);
      color: var(--color-white);
    }
  }
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  a {
    margin-bottom: calc(var(--spacing) * 1);
    display: inline-block;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-article);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    color: var(--color-black);
    text-decoration-line: none;
    &:hover, &:focus, &:active {
      color: var(--color-white);
    }
  }
}
.read-more {
  white-space: nowrap;
  color: var(--color-primary);
  &::after {
    content: var(--tw-content);
    --tw-content: ' \232A';
    content: var(--tw-content);
  }
  &:hover, &:active {
    text-decoration-line: underline;
  }
}
.traversal {
  display: flex;
  justify-content: space-between;
  padding-inline: calc(var(--spacing) * 0);
  a {
    display: inline-block;
    min-width: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    background-color: var(--color-primary-lighter);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-primary);
    text-decoration-line: none;
    &:hover, &:focus, &:active {
      background-color: var(--color-primary);
      color: var(--color-primary-inverted);
    }
  }
}
.likes {
  position: relative;
  display: inline;
  .likes {
    border: none;
    img {
      vertical-align: middle;
    }
  }
  .like .unlike {
    display: none;
  }
  .liked .like {
    display: none;
  }
}
:root {
  --chroma-color: #586e75;
  --chroma-bg-color: #ededeb;
  --chroma-bg-highlight-line: #d6d0bf;
  --chroma-line-numbers: #7f7f7f;
  --chroma-key: #859900;
  --chroma-namespace: #dc322f;
  --chroma-name: #268bd2;
  --chroma-literal: #2aa198;
  --chroma-comment: #93a1a1;
  --chroma-generic: #d33682;
}
@media (prefers-color-scheme: dark) {
  --chroma-color: #93a1a1;
  --chroma-bg-color: #002b36;
  --chroma-bg-highlight-line: #19404a;
  --chroma-line-numbers: #495050;
  --chroma-key: #719e07;
  --chroma-namespace: #dc322f;
  --chroma-name: #268bd2;
  --chroma-literal: #2aa198;
  --chroma-comment: #586e75;
  --chroma-generic: #dc322f;
}
.bg { color: var(--chroma-color); background-color: var(--chroma-bg-color); }
.chroma {
  color: var(--chroma-color);
  background-color: var(--chroma-bg-color);

  .lnlinks {
    outline: none;
    text-decoration: none;
    color: inherit
  }

  .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .hl {
    background-color: var(--chroma-bg-highlight-line);
  }

  .lnt {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: var(--chroma-line-numbers)
  }

  .ln {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: var(--chroma-line-numbers)
  }

  .line {
    display: flex;
  }

  .k {
    color: var(--chroma-key)
  }

  .kc {
    color: var(--chroma-key);
    font-weight: bold
  }

  .kd {
    color: var(--chroma-key)
  }

  .kn {
    color: var(--chroma-namespace);
    font-weight: bold
  }

  .kp {
    color: var(--chroma-key)
  }

  .kr {
    color: var(--chroma-key)
  }

  .kt {
    color: var(--chroma-key);
    font-weight: bold
  }

  .n {
    color: var(--chroma-name)
  }

  .na {
    color: var(--chroma-name)
  }

  .nb {
    color: #cb4b16
  }

  .bp {
    color: var(--chroma-name)
  }

  .nc {
    color: #cb4b16
  }

  .no {
    color: var(--chroma-name)
  }

  .nd {
    color: var(--chroma-name)
  }

  .ni {
    color: var(--chroma-name)
  }

  .ne {
    color: var(--chroma-name)
  }

  .nf {
    color: var(--chroma-name)
  }

  .fm {
    color: var(--chroma-name)
  }

  .nl {
    color: var(--chroma-name)
  }

  .nn {
    color: var(--chroma-name)
  }

  .nx {
    color: var(--chroma-name)
  }

  .py {
    color: var(--chroma-name)
  }

  .nt {
    color: var(--chroma-name);
    font-weight: bold
  }

  .nv {
    color: var(--chroma-name)
  }

  .vc {
    color: var(--chroma-name)
  }

  .vg {
    color: var(--chroma-name)
  }

  .vi {
    color: var(--chroma-name)
  }

  .vm {
    color: var(--chroma-name)
  }

  .l {
    color: var(--chroma-literal)
  }

  .ld {
    color: var(--chroma-literal)
  }

  .s {
    color: var(--chroma-literal)
  }

  .sa {
    color: var(--chroma-literal)
  }

  .sb {
    color: var(--chroma-literal)
  }

  .sc {
    color: var(--chroma-literal)
  }

  .dl {
    color: var(--chroma-literal)
  }

  .sd {
    color: var(--chroma-literal)
  }

  .s2 {
    color: var(--chroma-literal)
  }

  .se {
    color: var(--chroma-literal)
  }

  .sh {
    color: var(--chroma-literal)
  }

  .si {
    color: var(--chroma-literal)
  }

  .sx {
    color: var(--chroma-literal)
  }

  .sr {
    color: var(--chroma-literal)
  }

  .s1 {
    color: var(--chroma-literal)
  }

  .ss {
    color: var(--chroma-literal)
  }

  .m {
    color: var(--chroma-literal);
    font-weight: bold
  }

  .mb {
    color: var(--chroma-literal);
    font-weight: bold
  }

  .mf {
    color: var(--chroma-literal);
    font-weight: bold
  }

  .mh {
    color: var(--chroma-literal);
    font-weight: bold
  }

  .mi {
    color: var(--chroma-literal);
    font-weight: bold
  }

  .il {
    color: var(--chroma-literal);
    font-weight: bold
  }

  .mo {
    color: var(--chroma-literal);
    font-weight: bold
  }

  .ow {
    color: var(--chroma-key)
  }

  .c {
    color: var(--chroma-comment);
    font-style: italic
  }

  .ch {
    color: var(--chroma-comment);
    font-style: italic
  }

  .cm {
    color: var(--chroma-comment);
    font-style: italic
  }

  .c1 {
    color: var(--chroma-comment);
    font-style: italic
  }

  .cs {
    color: var(--chroma-comment);
    font-style: italic
  }

  .cp {
    color: var(--chroma-comment);
    font-style: italic
  }

  .cpf {
    color: var(--chroma-comment);
    font-style: italic
  }

  .g {
    color: var(--chroma-generic)
  }

  .gd {
    color: var(--chroma-generic)
  }

  .ge {
    color: var(--chroma-generic)
  }

  .gr {
    color: var(--chroma-generic)
  }

  .gh {
    color: var(--chroma-generic)
  }

  .gi {
    color: var(--chroma-generic)
  }

  .go {
    color: var(--chroma-generic)
  }

  .gp {
    color: var(--chroma-generic)
  }

  .gs {
    color: var(--chroma-generic)
  }

  .gu {
    color: var(--chroma-generic)
  }

  .gt {
    color: var(--chroma-generic)
  }

  .gl {
    color: var(--chroma-generic)
  }
}

.highlight {
  position: relative;
  border-radius: var(--radius-md);

  .icon-tabler.icon-tabler-check {
    stroke: var(--color-primary-lighter);
  }

  .chroma {
    .lntable {
      padding-block: calc(var(--spacing) * 3);
      padding-inline: calc(var(--spacing) * 5);
      overflow: hidden;

      pre {
        margin: 0;
        border-radius: 0;
      }
    }

    &:has(table) {
      background-color: transparent;
    }
  }

  .lntable tr {
    display: flex;
  }
}