@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/plex-sans-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/plex-sans-thai-400.woff2") format("woff2");
  unicode-range: U+0E01-0E3A, U+0E40-0E5B, U+200B-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/plex-sans-thai-500.woff2") format("woff2");
  unicode-range: U+0E01-0E3A, U+0E40-0E5B, U+200B-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/plex-sans-thai-600.woff2") format("woff2");
  unicode-range: U+0E01-0E3A, U+0E40-0E5B, U+200B-200D, U+25CC;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/plex-mono-600.woff2") format("woff2");
}

@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("../assets/fonts/material-symbols-rounded.woff2") format("woff2");
}

[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.symbol {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-size: inherit;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-optical-sizing: auto;
  font-variation-settings: "FILL" var(--symbol-fill, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}

.symbol--drawn {
  overflow: visible;
  stroke-width: var(--symbol-stroke, 2);
}

:is(a.active, button.active, [aria-current="page"], [aria-pressed="true"], [aria-selected="true"]) .symbol {
  --symbol-fill: 1;
}