@font-face {
  font-family: Inter;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url("/font/inter-roman-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  src: url("/font/inter-italic-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-display: swap;
  src: url("/font/jet-brains-mono.woff2") format("woff2");
}

:root {
  --color-gray-300: #a4a4a4;
  --color-gray-800: #383838;
}

@layer reset {
  *, :before, :after {
    box-sizing: border-box;
    border: 0 solid #c8c8c8;
  }

  * {
    scrollbar-color: var(--lightningcss-light, #d1d5db) var(--lightningcss-dark, #3f3f46) transparent;
    scrollbar-width: thin;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: none;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--lightningcss-light, #d1d5db) var(--lightningcss-dark, #3f3f46);
    border-radius: 9999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--lightningcss-light, #9ca3af) var(--lightningcss-dark, #52525b);
  }

  :before, :after {
    --tw-content: "";
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    font-variation-settings: normal;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    line-height: 1.5;
  }

  body {
    line-height: inherit;
    margin: 0;
  }

  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-feature-settings: normal;
    font-variation-settings: normal;
    font-family: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  button, input, optgroup, select, textarea {
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  button, select {
    text-transform: none;
  }

  button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
    appearance: button;
    background-color: #0000;
    background-image: none;
  }

  :-moz-focusring {
    outline: auto;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  progress {
    vertical-align: baseline;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    appearance: textfield;
    outline-offset: -2px;
  }

  ::-webkit-search-decoration {
    appearance: none;
  }

  ::-webkit-file-upload-button {
    appearance: button;
    font: inherit;
  }

  summary {
    display: list-item;
  }

  blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
    margin: 0;
  }

  fieldset {
    margin: 0;
    padding: 0;
  }

  legend {
    padding: 0;
  }

  ol, ul, menu {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  dialog {
    padding: 0;
  }

  textarea {
    resize: vertical;
  }

  input::placeholder, textarea::placeholder {
    opacity: 1;
    color: #818181;
  }

  button, [role="button"] {
    cursor: pointer;
  }

  :disabled {
    cursor: default;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none;
  }
}