/* =======================
	Variables
	======================= */
/* =======================
	Reset
	======================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
:focus:not(:focus-visible) {
  outline: none;
}
:root {
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
}
summary {
  list-style: none;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
hr {
  border: none;
  height: 1px;
  background-color: currentColor;
}
address {
  font-style: normal;
}
th,
td {
  text-align: left;
}
@font-face {
  font-family: "Product Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/ProductSans-Regular.woff") format("woff");
}
@font-face {
  font-family: "Product Sans";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/ProductSans-Italic.woff") format("woff");
}
@font-face {
  font-family: "Product Sans";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/ProductSans-Medium.woff") format("woff");
}
@font-face {
  font-family: "Product Sans";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/ProductSans-Bold.woff") format("woff");
}
@font-face {
  font-family: "Product Sans";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/ProductSans-BoldItalic.woff") format("woff");
}
/* =======================
	Base
	======================= */
:root {
  font-family: "Product Sans", sans-serif;
  font-size: 20px;
  font-size: clamp(16px, 1.25vw, 22px);
  text-rendering: geometricPrecision;
  scrollbar-gutter: stable;
  text-underline-position: under;
  background-color: #141314;
  color: #fbfbfb;
}
[id] {
  scroll-margin-top: 10rem;
}
pre {
  border-radius: 1.2rem;
  background: #1C1B1D;
  padding: 1.5rem;
  width: calc(100% + 4rem);
  margin: 1.5rem -1.5rem;
  font-size: 0.8rem;
  -moz-tab-size: 1.5rem;
    -o-tab-size: 1.5rem;
       tab-size: 1.5rem;
}
code {
  display: block;
}
h1,
.heading-1,
h2,
.heading-2,
h3,
.heading-3,
h4,
.heading-4,
h5,
.heading-5 {
  margin-top: 2em;
  margin-bottom: 1em;
  font-weight: 600;
}
h1:first-child,
.heading-1:first-child,
h2:first-child,
.heading-2:first-child,
h3:first-child,
.heading-3:first-child,
h4:first-child,
.heading-4:first-child,
h5:first-child,
.heading-5:first-child {
  margin-top: 0;
}
h1:last-child,
.heading-1:last-child,
h2:last-child,
.heading-2:last-child,
h3:last-child,
.heading-3:last-child,
h4:last-child,
.heading-4:last-child,
h5:last-child,
.heading-5:last-child {
  margin-bottom: 0;
}
h1 + h1, h1 + .heading-1, h1 + h2, h1 + .heading-2, h1 + h3, h1 + .heading-3, h1 + h4, h1 + .heading-4, h1 + h5, h1 + .heading-5,
.heading-1 + h1,
.heading-1 + .heading-1,
.heading-1 + h2,
.heading-1 + .heading-2,
.heading-1 + h3,
.heading-1 + .heading-3,
.heading-1 + h4,
.heading-1 + .heading-4,
.heading-1 + h5,
.heading-1 + .heading-5,
h2 + h1,
h2 + .heading-1,
h2 + h2,
h2 + .heading-2,
h2 + h3,
h2 + .heading-3,
h2 + h4,
h2 + .heading-4,
h2 + h5,
h2 + .heading-5,
.heading-2 + h1,
.heading-2 + .heading-1,
.heading-2 + h2,
.heading-2 + .heading-2,
.heading-2 + h3,
.heading-2 + .heading-3,
.heading-2 + h4,
.heading-2 + .heading-4,
.heading-2 + h5,
.heading-2 + .heading-5,
h3 + h1,
h3 + .heading-1,
h3 + h2,
h3 + .heading-2,
h3 + h3,
h3 + .heading-3,
h3 + h4,
h3 + .heading-4,
h3 + h5,
h3 + .heading-5,
.heading-3 + h1,
.heading-3 + .heading-1,
.heading-3 + h2,
.heading-3 + .heading-2,
.heading-3 + h3,
.heading-3 + .heading-3,
.heading-3 + h4,
.heading-3 + .heading-4,
.heading-3 + h5,
.heading-3 + .heading-5,
h4 + h1,
h4 + .heading-1,
h4 + h2,
h4 + .heading-2,
h4 + h3,
h4 + .heading-3,
h4 + h4,
h4 + .heading-4,
h4 + h5,
h4 + .heading-5,
.heading-4 + h1,
.heading-4 + .heading-1,
.heading-4 + h2,
.heading-4 + .heading-2,
.heading-4 + h3,
.heading-4 + .heading-3,
.heading-4 + h4,
.heading-4 + .heading-4,
.heading-4 + h5,
.heading-4 + .heading-5,
h5 + h1,
h5 + .heading-1,
h5 + h2,
h5 + .heading-2,
h5 + h3,
h5 + .heading-3,
h5 + h4,
h5 + .heading-4,
h5 + h5,
h5 + .heading-5,
.heading-5 + h1,
.heading-5 + .heading-1,
.heading-5 + h2,
.heading-5 + .heading-2,
.heading-5 + h3,
.heading-5 + .heading-3,
.heading-5 + h4,
.heading-5 + .heading-4,
.heading-5 + h5,
.heading-5 + .heading-5 {
  margin-top: 1em;
}
.heading-0 {
  font-size: 4.5rem;
}
h1,
.heading-1 {
  font-size: 3rem;
}
h2,
.heading-2 {
  font-size: 2.5rem;
}
h3,
.heading-3 {
  font-size: 2rem;
}
h4,
.heading-4 {
  font-size: 1.5rem;
}
h5,
.heading-5 {
  font-size: 1.25rem;
}
p,
ul,
ol {
  margin-bottom: 1rem;
}
p:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}
ul,
ol {
  padding-left: 1rem;
}
nav ul,
nav ol {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.m-wiki-detail__content ul {
  list-style-type: none;
  padding-left: 1.25rem;
}
.m-wiki-detail__content ul li {
  position: relative;
}
.m-wiki-detail__content ul li::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: -1.25rem;
  width: 0.75rem;
  height: 2px;
  margin-right: 0.5rem;
}
.m-wiki-detail__content ul li:nth-of-type(5n + 1)::before {
  background: #82b1ff;
}
.m-wiki-detail__content ul li:nth-of-type(5n + 2)::before {
  background: #FFB38E;
}
.m-wiki-detail__content ul li:nth-of-type(5n + 3)::before {
  background: #a8e6cf;
}
.m-wiki-detail__content ul li:nth-of-type(5n + 4)::before {
  background: #d1aad1;
}
.m-wiki-detail__content ul li:nth-of-type(5n + 5)::before {
  background: #dcfe6c;
}
strong,
b {
  font-weight: 800;
}
a {
  color: currentColor;
}
nav a {
  text-decoration: none;
}
img,
svg,
video {
  max-width: 100%;
  height: auto;
}
iframe {
  max-width: 100%;
  border: none;
}
figure {
  font-size: 0;
}
figcaption {
  margin-top: 1rem;
  font-size: 1rem;
}
hr {
  border: none;
  border-bottom: 1px solid;
}
input,
textarea,
select,
button {
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  background-color: transparent;
}
input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=url],
input[type=search],
input[type=password],
input[type=submit],
textarea,
select,
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
input[type=checkbox],
input[type=radio] {
  margin-right: 0.25rem;
}
textarea {
  resize: vertical;
}
::-webkit-input-placeholder {
  color: currentColor;
}
::-moz-placeholder {
  color: currentColor;
}
:-ms-input-placeholder {
  color: currentColor;
}
:-moz-placeholder {
  color: currentColor;
}
fieldset {
  border: none;
}
button,
input[type=submit],
input[type=file]::file-selector-button,
.m-button {
  text-rendering: geometricPrecision;
  cursor: pointer;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  leading-trim: both;
}
/* =======================
	Utilities
	======================= */
.u-grid {
  display: grid;
  gap: 0.75rem;
}
.u-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 840px) {
  .u-grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.u-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 840px) {
  .u-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 600px) {
  .u-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.u-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media screen and (max-width: 840px) {
  .u-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 600px) {
  .u-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.u-grid__item--2-3 {
  grid-column: span 2;
}
@media screen and (max-width: 840px) {
  .u-grid__item--2-3 {
    grid-column: span 1;
  }
}
.u-limiter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 10fr) minmax(0, 1fr);
  grid-template-areas: ". content .";
}
@media screen and (max-width: 600px) {
  .u-limiter {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 11fr) minmax(0, 0.5fr);
  }
}
.u-limiter__inner {
  grid-area: content;
}
.u-section {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.u-center {
  text-align: center;
}
.u-text {
  max-width: 80ch;
}
.u-green {
  color: #a8e6cf;
}
.u-blue {
  color: #82b1ff;
}
.u-purple {
  color: #d1aad1;
}
.u-orange {
  color: #FFB38E;
}
.u-yellow {
  color: #dcfe6c;
}
/* =======================
	Layouts
	======================= */
/* =======================
	Modules
	======================= */
.m-skip {
  position: absolute;
  z-index: 11;
  padding: 0.25rem;
  background-color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}
.m-skip:focus {
  opacity: 1;
  pointer-events: auto;
}
.m-hamburger {
  color: currentColor;
}
.m-hamburger.is-clicked rect {
  transform: scaleX(0);
}
.m-hamburger.is-clicked rect:first-child {
  transform: translateY(0) rotate(45deg);
}
.m-hamburger.is-clicked rect:last-child {
  transform: translateY(0) rotate(-45deg);
}
.m-hamburger svg {
  width: 1.5rem;
  color: currentColor;
}
.m-hamburger rect {
  fill: currentColor;
  transform-origin: center;
  transition: transform 0.25s ease-in-out;
}
.m-hamburger rect:not(:first-child):not(:last-child) {
  transform-origin: left;
}
.m-hamburger rect:first-child {
  transform: translateY(-16px);
}
.m-hamburger rect:last-child {
  transform: translateY(16px);
}
.m-nav {
  display: flex;
  justify-content: space-between;
}
.m-nav__bar-wrapper {
  z-index: 9;
  position: sticky;
  top: 0;
  width: 100%;
  padding: 1.5rem 0;
  background: #141314;
}
.m-nav__list {
  display: flex;
  gap: 1rem;
  font-size: 1.2rem;
}
.m-nav__logo-link {
  font-size: 1.75rem;
  font-weight: 800;
}
.m-nav__list-item {
  cursor: pointer;
}
.m-nav__list-item:hover a {
  color: #b0b0b0;
}
.m-nav__list-item:hover a::after {
  transform: translateY(0.2rem);
}
.m-nav__list-item:nth-of-type(5n + 1) a::after {
  border-bottom: 4px solid #82b1ff;
}
.m-nav__list-item:nth-of-type(5n + 2) a::after {
  border-bottom: 4px solid #FFB38E;
}
.m-nav__list-item-link {
  transition: color 0.25s ease-in-out;
  position: relative;
}
.m-nav__list-item-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  transition: transform 0.25s ease-in-out;
  will-change: transform;
}
@keyframes shape {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}
.m-card {
  background: #1C1B1D;
  border-radius: 1.2rem;
  overflow: hidden;
  transition: background 0.25s ease-in-out;
}
.m-card__header {
  display: flex;
  align-items: flex-end;
  position: relative;
  background: var(--accent);
  margin: 0;
  height: 9rem;
  padding: 1rem 2rem;
  border-radius: 1.2rem;
  overflow: hidden;
}
.m-card--link .m-card__header {
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  color: #141314;
  transition: filter 0.25s ease-in-out;
}
.m-card__arrow {
  position: absolute;
  right: 1.5rem;
  width: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.25s ease-in-out;
}
.m-card__title {
  margin-top: 0;
  margin-bottom: 1rem !important;
}
.m-card--link .m-card__title {
  margin-bottom: 0.5rem !important;
}
.m-card__content {
  padding: 1rem 2rem 2rem 2rem;
}
.m-card__shape {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 120%;
  max-width: unset;
  opacity: 0.1;
  animation: shape 7.5s linear infinite;
  animation-play-state: paused;
  transition: width 0.35s ease-in-out;
}
.m-card__shape--first {
  left: -65%;
}
.m-card__shape--second {
  right: -65%;
}
.m-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  font-weight: 800;
  list-style-type: none;
}
.m-card__tags--filter {
  gap: 0.75rem;
}
.m-card__tags--detail {
  gap: 0.75rem;
  font-size: 1.4rem;
}
.m-card__pinned {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.75rem;
}
.m-card__tag {
  position: relative;
  color: #141314;
}
.m-card__tags--detail .m-card__tag {
  color: #fbfbfb;
}
.m-card__tags--filter .m-card__tag {
  font-size: 1.2rem;
  color: #fbfbfb;
  transition: color 0.25s ease-in-out;
}
.m-card__tags--filter .m-card__tag:hover {
  color: #b0b0b0;
}
.m-card__tags--filter .m-card__tag:hover::after {
  transform: translateY(0.2rem);
}
.m-card__tag::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  border-bottom: 4px solid var(--accent);
  transition: transform 0.25s ease-in-out;
  will-change: transform;
}
@media (hover: hover) {
  .m-card:hover {
    background: #2d2d2d;
  }
  .m-card:hover .m-card__shape {
    width: 130%;
    animation-play-state: running;
  }
  .m-card:hover .m-card__arrow {
    transform: translateX(0.5rem) translateY(calc(-50% - 0.5rem));
  }
}
.m-accordion__head {
  padding: 1.25rem;
}
.m-accordion__head-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.m-accordion__head-icon {
  flex-shrink: 0;
}
.m-accordion__body {
  padding: 1.25rem;
}
.m-form__field {
  max-width: 20rem;
}
.m-button {
  padding: 1.25rem 2.5rem;
}
.m-overlaying-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.m-overlaying-link__parent {
  position: relative;
}
.m-overlaying-link__parent a:not(.m-overlaying-link) {
  position: relative;
  z-index: 2;
}
.m-intro-search {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.m-intro-search__input {
  width: 20rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  color: #141314;
  background-color: #fbfbfb;
  font-size: 1.2rem;
}
.m-wiki-detail__title {
  margin-bottom: 1rem;
}
.m-wiki-detail__content {
  font-size: 1.2rem;
}
.m-big-link {
  display: flex;
  position: relative;
  font-size: 1.75rem;
  font-weight: 800;
}
@media (hover: hover) {
  .m-big-link:hover .m-big-link__icon {
    transform: translateY(-0.25rem) translateX(0.25rem);
  }
}
.m-big-link__icon {
  width: 1.5rem;
  margin-left: 1rem;
  transition: transform 0.25s ease-in-out;
}
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
code.hljs {
  padding: 3px 5px;
}
/*
   * Visual Studio 2015 dark style
   * Author: Nicolas LLOBERA <nllobera@gmail.com>
   */
.hljs {
  background: #1e1e1e;
  color: #dcdcdc;
}
.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
  color: #569cd6;
}
.hljs-link {
  color: #569cd6;
  text-decoration: underline;
}
.hljs-built_in,
.hljs-type {
  color: #4ec9b0;
}
.hljs-number,
.hljs-class {
  color: #b8d7a3;
}
.hljs-string,
.hljs-meta .hljs-string {
  color: #d69d85;
}
.hljs-regexp,
.hljs-template-tag {
  color: #9a5334;
}
.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
  color: #dcdcdc;
}
.hljs-comment,
.hljs-quote {
  color: #57a64a;
  font-style: italic;
}
.hljs-doctag {
  color: #608b4e;
}
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-tag {
  color: #9b9b9b;
}
.hljs-variable,
.hljs-template-variable {
  color: #bd63c5;
}
.hljs-attr,
.hljs-attribute {
  color: #9cdcfe;
}
.hljs-section {
  color: gold;
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: bold;
}
/*.hljs-code {
    font-family:'Monospace';
  }*/
.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #d7ba7d;
}
.hljs-addition {
  background-color: #144212;
  display: inline-block;
  width: 100%;
}
.hljs-deletion {
  background-color: #600;
  display: inline-block;
  width: 100%;
}