@charset "UTF-8";
/* ==========================================
   Global Design System Reset & Baseline
   Author: Clement Femi Bazuaye
   Github: https://github.com/dev-bazz
   LinkedIn: https://www.linkedin.com/in/devbazz/
   ========================================== */
/*
#:~:text=hello,you
  ::target-text {}
  */
/* -----------------------------
   1. Design Tokens
   ----------------------------- */
@layer tokens {
  :root {
    /* Fonts */
    --font-sans:
      system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
      sans-serif;
    --font-body: var(--averta, var(--font-sans));
    --font-heading: var(--averta, var(--font-sans));
    --color-bg: #fff;
    --color-fg: #111;
    --spacing: 1rem;
    --outline-size: 0.125rem;
    --outline-color: black;
    --outline-offset: 0.125rem;
    --selection-bg: #bf1d29;
    --selection-fg: #fff;
    --scroll-width: 4px;
    --scroll-track-color: transparent;
    --scroll-thumb-color: #bf1d29;
    --scroll-border-radius: 50px;
    --scroll-hover-color: oklch(from #bf1d29 clamp(0, l - 0.08, 1) calc(c * 0.92) h);
    --scroll-display: block;
    --drop-down-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.0002 6.66679C18.0002 6.88013 17.9185 7.09346 17.756 7.25596L11.0894 13.9226C10.7635 14.2485 10.2369 14.2485 9.91104 13.9226L3.24437 7.25596C2.91854 6.93013 2.91854 6.40346 3.24437 6.07763C3.57021 5.75179 4.09687 5.75179 4.42271 6.07763L10.5002 12.1551L16.5777 6.07763C16.9035 5.75179 17.4302 5.75179 17.756 6.07763C17.9185 6.24013 18.0002 6.45346 18.0002 6.66679Z' fill='%235F738C'/%3E%3C/svg%3E");
  }
}
/* -----------------------------
   2. Base Reset
   ----------------------------- */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html,
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd,
  ul,
  ol {
    margin: 0;
    padding: 0;
  }
  html {
    height: 100%;
    scroll-behavior: smooth;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  body {
    min-height: 100svh;
    line-height: 1.5;
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-fg);
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
  }
  a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }
  video,
  img {
    object-fit: cover;
  }
  ul,
  ol {
    list-style: none;
  }
  :is(button, input, select) {
    cursor: pointer;
  }
  button,
  input:not([type=checkbox], [type=radio]),
  textarea,
  select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  :is(select[data-select-placeholder]) {
    --placeholder-color: rgb(135, 135, 135);
  }
  :is(select[data-select-placeholder]:focus-within option:first-child) {
    display: none;
  }
  :is(select[data-select-placeholder]:invalid) {
    color: var(--placeholder-color);
  }
  :is(textarea:not([rows])) {
    min-height: 10em;
  }
  :is(label:has(input, textarea, select, div)) {
    display: grid;
    gap: 0.5rem;
    cursor: pointer;
  }
  textarea {
    resize: vertical;
    min-height: 10em;
    /* fallback */
    field-sizing: content;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem;
    border: 1px solid #ddd;
  }
  ::selection {
    background-color: var(--selection-bg);
    color: var(--selection-fg);
  }
  :focus-visible {
    outline: var(--outline-size) solid var(--outline-color);
    outline-offset: var(--outline-offset);
  }
}
@layer scrollStyle {
  div,
  body,
  section {
    scrollbar-width: var(--scroll-width);
    -ms-overflow-style: var(--scroll-display);
  }
  div::-webkit-scrollbar,
  body::-webkit-scrollbar,
  section::-webkit-scrollbar {
    display: var(--scroll-display);
  }
  div::-webkit-scrollbar,
  body::-webkit-scrollbar,
  section::-webkit-scrollbar {
    width: var(--scroll-width);
  }
  div::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track,
  section::-webkit-scrollbar-track {
    background: var(--scroll-track-color);
  }
  div::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  section::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb-color);
    border-radius: var(--scroll-border-radius);
  }
  div::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover,
  section::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-hover-color);
  }
}
@layer experimental {
  select {
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    width: 100%;
  }
  select option:checked {
    font-weight: bold;
  }
  select option::checkmark {
    order: 1;
    margin-left: auto;
    content: "☑️";
  }
  option:first-of-type {
    border-radius: 8px 8px 0 0;
  }
  option:last-of-type {
    border-radius: 0 0 8px 8px;
  }
  option:not(option:last-of-type) {
    border-bottom: none;
  }
  option {
    background: #eeeeee;
    color: rgb(29, 26, 26);
  }
  option:hover {
    background: var(--red-cta);
    color: var(--white);
  }
  select {
    appearance: none;
  }
  /* Native fallback arrow for browsers without the Customizable Select API
     (Safari, Firefox). Chromium overrides this inside the @supports block below. */
  select:not([multiple]) {
    background-image: var(--drop-down-icon);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
  }
  /* `appearance: base-select` is parsed by Safari, so it cannot be used as the
     feature test. `::picker(select)` is only understood by Chromium. */
  @supports selector(::picker(select)) {
    select,
    ::picker(select) {
      appearance: base-select;
    }
    select:not([multiple]) {
      background-image: none;
      padding-right: 0;
    }
    select::picker-icon {
      color: #999999;
      transition: 0.4s rotate;
      transform-origin: center;
      content: var(--drop-down-icon);
    }
    select:open::picker-icon {
      rotate: 180deg;
    }
    ::picker(select) {
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s var(--ease-out-3, cubic-bezier(0.2, 0.8, 0.2, 1)), display 0.2s allow-discrete, overlay 0.2s allow-discrete;
      border: none;
    }
    ::picker(select):popover-open {
      opacity: 1;
    }
    /* Safari does not match :popover-open on ::picker(select) */
    select:open::picker(select) {
      opacity: 1;
    }
    @starting-style {
      ::picker(select):popover-open {
        opacity: 0;
      }
      select:open::picker(select) {
        opacity: 0;
      }
    }
    ::picker(select) {
      top: calc(anchor(bottom) + 0.5rem);
      left: anchor(0%);
    }
    select::-ms-expand {
      display: none;
    }
    /* transition the selected option changing */
    selectedcontent > * {
      transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), display 1s allow-discrete, opacity 1s;
      opacity: 1;
    }
    @starting-style {
      selectedcontent > * {
        opacity: 0;
        transform: translateY(10px);
      }
    }
  }
}
/* -----------------------------
   3. Typography
   ----------------------------- */
@layer typography {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }
  p,
  li,
  figcaption {
    max-width: 64ch;
    line-height: 1.6;
    text-wrap: pretty;
  }
}
/* -----------------------------
   4. Layout
   ----------------------------- */
@layer layout {
  footer,
  main,
  nav,
  aside,
  section,
  article {
    width: 100%;
    container-type: inline-size;
  }
  section {
    content-visibility: auto;
    contain-intrinsic-size: auto 43.75rem;
  }
  [data-container] {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--spacing);
  }
  [float-root] {
    display: flow-root;
  }
}
/* -----------------------------
   5. Components
   ----------------------------- */
/* Details */
@layer details {
  details > summary {
    cursor: pointer;
    list-style: none;
  }
  details > summary::marker,
  details > summary::-webkit-details-marker {
    display: none;
  }
  @supports (interpolate-size: allow-keywords) {
    :root {
      interpolate-size: allow-keywords;
    }
    ::details-content {
      --trans-duration: 0.5s;
      transition: all var(--trans-duration) cubic-bezier(0.2, 0.8, 0.2, 1), content-visibility var(--trans-duration) allow-discrete;
      height: 0;
      overflow: clip;
    }
    [open]::details-content {
      height: auto;
      padding-bottom: 0.5em;
    }
  }
}
/* Dialog */
@layer dialog-element {
  dialog {
    --background-color: rgba(64, 64, 64, 0.419);
    transition: display 1s allow-discrete, overlay 1s allow-discrete, scale 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    scale: 0;
  }
  dialog[open] {
    transition: display 1s allow-discrete, overlay 1s allow-discrete, scale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    scale: 1;
  }
  @starting-style {
    dialog[open] {
      scale: 0;
    }
  }
  dialog[open]::backdrop {
    opacity: 1;
  }
  @starting-style {
    dialog[open]::backdrop {
      opacity: 0;
    }
  }
  dialog::backdrop {
    background-color: var(--background-color);
    transition: opacity 1s;
    opacity: 0;
  }
}
/* -----------------------------
   6. Accessibility
   ----------------------------- */
@layer accessibility {
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  @media (prefers-contrast: more) {
    :focus-visible {
      outline-color: CanvasText;
    }
  }
}
/* -----------------------------
   7. Developer Ergonomics
   ----------------------------- */
@layer helpers {
  :root {
    --lighter-sample: oklch(from var(--base) clamp(0, l + 0.22, 1) calc(c * 0.9) h);
    --darker-sample: oklch(from var(--base) clamp(0, l - 0.22, 1) calc(c * 0.92) h);
    --complement-sample: hsl(from var(--base) calc(h - 180) s l);
    --opcacity-sample: oklch(from var(--base, red) 0.1778 288.37 / 54.84%);
  }
  [data-debug] * {
    outline: 1px solid magenta;
  }
  .visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
  }
  .custom-check-box .checkbox {
    --size: 0.5rem;
    --border-color: #555;
    --padding: 0.4375rem;
    --active-check-color: var(--red);
    --top-space: 0.3rem;
    --mark: '✔';
    margin-top: var(--top-space);
    padding: var(--padding);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--size);
    height: var(--size);
    aspect-ratio: 1;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
  }
  .custom-check-box:has(input:checked) .checkbox {
    --border-color: var(--active-check-color);
    background-color: var(--active-check-color);
  }
  .custom-check-box:has(input:checked) .checkbox::before {
    content: var(--mark);
    /* Unicode checkmark */
    display: block;
    color: white;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1;
  }
  .custom-check-box input[type=checkbox] {
    appearance: none;
    display: none;
  }
}