/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.0.0-canary.160_babel-plugin-react-compiler@0.0.0-experimental-48eb8f4-20240822_react-_h5xpl647asxd57i2pwzfqhepry/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[2].use[1]!./node_modules/.pnpm/next@15.0.0-canary.160_babel-plugin-react-compiler@0.0.0-experimental-48eb8f4-20240822_react-_h5xpl647asxd57i2pwzfqhepry/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[12].oneOf[2].use[2]!./node_modules/.pnpm/next@15.0.0-canary.160_babel-plugin-react-compiler@0.0.0-experimental-48eb8f4-20240822_react-_h5xpl647asxd57i2pwzfqhepry/node_modules/next/font/google/target.css?{"path":"src\\app\\(app)\\layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"display":"swap"}],"variableName":"inter"} ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/55c55f0601d81cf3-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/26a46d62cd723877-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/97e0cb1ae144a2a9-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/581909926a08bbc8-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/6d93bde91c0c2823-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/a34f9d1faa5f3315-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.49%;descent-override: 22.56%;line-gap-override: 0.00%;size-adjust: 107.06%
}.__className_d65c78 {font-family: 'Inter', 'Inter Fallback';font-style: normal
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.0.0-canary.160_babel-plugin-react-compiler@0.0.0-experimental-48eb8f4-20240822_react-_h5xpl647asxd57i2pwzfqhepry/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[11].use[2]!./node_modules/.pnpm/next@15.0.0-canary.160_babel-plugin-react-compiler@0.0.0-experimental-48eb8f4-20240822_react-_h5xpl647asxd57i2pwzfqhepry/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[11].use[3]!./node_modules/.pnpm/next@15.0.0-canary.160_babel-plugin-react-compiler@0.0.0-experimental-48eb8f4-20240822_react-_h5xpl647asxd57i2pwzfqhepry/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[12].oneOf[11].use[4]!./node_modules/.pnpm/next@15.0.0-canary.160_babel-plugin-react-compiler@0.0.0-experimental-48eb8f4-20240822_react-_h5xpl647asxd57i2pwzfqhepry/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[12].oneOf[11].use[5]!./src/app/(app)/globals.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  background-color: #000000;
}

body {
  color: #ffffff;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 20px;
}

main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  max-width: 800px;
  margin: 0 auto;
  padding-block: 80px;
  border-inline-width: 1px;
  border-inline-style: solid;
  border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1019607843), rgba(255, 255, 255, 0)) 1;
}
@media screen and (max-width: 600px) {
  main {
    padding-block: 20px;
  }
}

article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 60px 80px;
}
@media screen and (max-width: 600px) {
  article {
    padding: 40px 40px;
  }
}

.badge {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2.6px;
}

h1 {
  color: #ffffff;
  font-size: 4rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.02rem;
  margin: 0;
}
@media screen and (max-width: 600px) {
  h1 {
    font-size: 2rem;
  }
}

p {
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  margin: 0;
}

a {
  color: #ffffff;
  text-decoration: underline;
  transition: color 0.2s ease-out;
}
a:hover {
  color: rgba(255, 255, 255, 0.5019607843);
}

.codeBlock {
  position: relative;
  background-color: rgba(0, 0, 0, 0.4);
  margin: 0;
  padding: 0;
}
.codeBlock pre {
  margin: 0;
  padding: 60px 80px;
  overflow-x: auto;
}
@media screen and (max-width: 600px) {
  .codeBlock pre {
    padding: 40px 40px;
  }
}
.codeBlock pre::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1019607843), rgba(255, 255, 255, 0.1019607843), rgba(255, 255, 255, 0));
  z-index: 1;
}
.codeBlock pre::after {
  content: url("/crosshair.svg");
  display: block;
  height: 19px;
  width: 19px;
  position: absolute;
  top: -9px;
  left: -10px;
}
.codeBlock code {
  font-size: 14px;
  line-height: 2;
}
.codeBlock::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1019607843), rgba(255, 255, 255, 0.1019607843), rgba(255, 255, 255, 0));
  z-index: 1;
}
.codeBlock::after {
  content: url("/crosshair.svg");
  display: block;
  height: 19px;
  width: 19px;
  position: absolute;
  bottom: -9px;
  right: -10px;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.background div.blur {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("/blur.png");
  background-repeat: repeat;
  background-size: 400px 400px;
  background-blend-mode: soft-light, normal;
  -webkit-backdrop-filter: blur(60px);
          backdrop-filter: blur(60px);
}
.background div.gradient {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("/gradient.webp");
  background-size: cover;
  background-position: center;
  z-index: -2;
}