@charset "UTF-8";

[data-reader] {
   overflow: hidden !important;
   position: absolute;
   width: 1px !important;
   height: 1px !important;
   margin: -1px !important;
   padding: 0 !important;
   white-space: nowrap !important;
   font-size: 0 !important;
   border: 0 !important;
   clip: rect(0, 0, 0, 0) !important
}

.block-link {
   font-size: 0
}

.block-link:after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 200;
   background: transparent;
   pointer-events: auto
}

.underline,
.crumbs-nav__link,
.wysiwyg a {
   text-decoration: underline;
   text-decoration-style: dotted;
   text-decoration-thickness: .077em;
   text-underline-offset: .144em;
   text-decoration-color: transparent
}

.is-hide {
   visibility: hidden !important;
   width: 0 !important;
   height: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
   font-size: 0 !important
}

.is-lock {
   overflow: hidden !important
}

body.is-lock {
   position: fixed;
   width: 100%
}

:root {
   --appMaxWidth: 1600px;
   --appGrid_Base: repeat(4, 1fr);
   --appGrid_Lite: repeat(8, 1fr);
   --appGrid_Full: repeat(12, 1fr);
   --gapsCol_Mini: 12px;
   --gapsCol_Base: 20px;
   --gapsCol_Plus: 40px;
   --gapsCol_Mega: 80px;
   --gapsRow_Mini: 20px;
   --gapsRow_Base: 20px;
   --gapsRow_Plus: 40px;
   --gapsRow_Mega: 60px;
   --fontFamily_Main: "JetBrains Mono", sans-serif;
   --fontFamily_Extra: "Kode Mono", sans-serif;
   --fontFamily_Code: "JetBrains Mono", monospace;
   --lineHeight_Main: 1.7;
   --lineHeight_H1: 1.25;
   --lineHeight_Hx: 1.4;
   --textMargin_Base: 1.051rem;
   --textMargin_Mini: .65rem;
   --textMargin_Plus: 2.102rem;
   --textMargin_Wide: 3.153rem;
   --textMargin_Mega: 4.204rem;
   --fontSize_Main: 15px;
   --fontSize_Menu: 15px;
   --fontSize_H1: clamp(35px, 3.5vw, 45px);
   --fontSize_H2: clamp(25px, 2.5vw, 31px);
   --fontSize_H3: clamp(20px, 2vw, 23px);
   --fontSize_H4: clamp(15px, 1.5vw, 17px);
   --fontSize_Hint: 13px;
   --fontSize_Desc: 17px;
   --fontSize_Spec: clamp(17px, 1.7vw, 22px);
   --fontWeight_Main: 400;
   --fontWeight_Bold: 700;
   --fontWeight_Spec: 0;
   --letterSpacing_Main: .05em;
   --letterSpacing_Hx: 0;
   --colorBlack: #000000;
   --colorWhite: #ffffff;
   --colorSelection: rgba(113, 25, 231, .35);
   --colorOnlay: rgba(0, 0, 0, .45);
   --colorText: #b3b3ba;
   --colorTitle: #e2e2ea;
   --colorSpec: #f8f8ff;
   --colorGray_02: rgba(245, 245, 248, .035);
   --colorGray_05: rgba(245, 245, 248, .085);
   --colorGray_10: rgba(245, 245, 248, .175);
   --colorGray_20: rgba(245, 245, 248, .25);
   --colorGray_25: rgba(245, 245, 248, .3);
   --colorGray_30: #bfbfc7;
   --colorGray_40: #a9a9b0;
   --colorGray_50: #545457;
   --colorGray_60: #272729;
   --colorAccent: #7119e7;
   --colorAccent_Hero: rgba(113, 25, 231, .075);
   --colorAccent_Dark: rgba(113, 25, 231, .4);
   --colorAccent_Glow: rgba(113, 25, 231, .65);
   --colorInvert: #8de617;
   --colorInvert_Dark: rgba(141, 230, 23, .4);
   --colorInvert_Glow: rgba(141, 230, 23, .65);
   --colorNotes: #f7064f;
   --colorNotes_Dark: rgba(247, 6, 79, .4);
   --colorNotes_Glow: rgba(247, 6, 79, .65);
   --colorNotify: #ffe906;
   --colorNotify_Dark: rgba(255, 233, 6, .4);
   --colorNotify_Glow: rgba(255, 233, 6, .65);
   --colorSpecial: #ff9506;
   --colorSpecial_Dark: rgba(255, 149, 6, .4);
   --colorSpecial_Glow: rgba(255, 149, 6, .65);
   --colorProjects: #148ae4;
   --colorProjects_Dark: rgba(20, 138, 228, .4);
   --colorProjects_Glow: rgba(20, 138, 228, .65);
   --buttonSize_Base: 40px;
   --buttonSize_Mini: 33px;
   --buttonSize_Plus: 54px;
   --inputSize_Base: 40px;
   --inputSize_Mini: 32px;
   --inputSize_Plus: 52px;
   --checkSize_Base: 16px;
   --checkSize_Plus: 20px;
   --borderRadius_Base: 1px;
   --borderRadius_Mini: 0;
   --borderRadius_Plus: 0;
   --transition_Base: all .3s;
   --transition_Text: all .15s
}

*,
*:before,
*:after {
   box-sizing: border-box
}

html {
   line-height: var(--lineHeight_Main);
   -webkit-text-size-adjust: 100%
}

body {
   margin: 0;
   font-family: var(--fontFamily_Main);
   font-size: var(--fontSize_Main);
   font-weight: var(--fontWeight_Main);
   color: var(--colorText);
   letter-spacing: var(--letterSpacing_Main);
   background: var(--colorBlack);
   -webkit-tap-highlight-color: transparent
}

*:focus-visible {
   outline: 2px solid var(--colorSelection);
   outline-offset: 2px
}

*:focus:not(:focus-visible) {
   outline: none
}

::selection,
::moz-selection {
   color: var(--colorWhite);
   text-shadow: none;
   background: var(--colorSelection)
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--fontFamily_Main);
   margin: 0;
   text-rendering: optimizeLegibility
}

p {
   margin: 0
}

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

hr {
   margin: 0
}

a {
   color: inherit;
   text-decoration: none;
   text-decoration-skip: edges;
   cursor: default
}

b,
strong {
   font-weight: var(--fontWeight_Bold)
}

i,
em {
   font-style: normal
}

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

sup {
   top: -.5em
}

sub {
   bottom: -.25em
}

small {
   font-size: 1em
}

mark {
   background: transparent
}

abbr[title] {
   text-decoration: underline;
   text-decoration-style: dotted
}

pre,
code,
kbd,
samp {
   font-family: var(--fontFamily_Code);
   font-size: 1em
}

pre {
   margin: 0
}

img {
   display: block;
   max-width: 100%;
   height: auto;
   object-fit: cover
}

iframe {
   border: 0
}

video {
   outline: 0
}

input,
textarea {
   letter-spacing: inherit;
   border-width: 0;
   outline: 0
}

input::placeholder,
textarea::placeholder {
   opacity: 1
}

button {
   padding: 0;
   background: transparent;
   border: 0
}

button,
input[type=button],
input[type=submit] {
   letter-spacing: inherit
}

button,
input,
optgroup,
select,
textarea {
   margin: 0;
   line-height: var(--lineHeight_Main);
   font-family: inherit;
   font-size: 1em
}

button,
[type=button],
[type=reset],
[type=submit] {
   padding: 0
}

[type=button],
select {
   border: 0
}

fieldset,
legend {
   padding: 0
}

progress {
   vertical-align: baseline
}

textarea {
   resize: vertical
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
   height: auto
}

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

summary {
   display: list-item
}

*:disabled {
   opacity: .5;
   cursor: not-allowed
}

.xnode {
   display: grid;
   grid-template-rows: auto 1fr auto;
   align-content: space-between;
   min-width: 320px;
   min-height: 100vh
}

.xnode__onlay {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 2000;
   display: none;
   background: var(--colorOnlay);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   animation-fill-mode: both;
   animation-timing-function: ease-out
}

.xnode__onlay.is-on {
   display: flex;
   animation-name: onlayLayer_On;
   animation-duration: .5s
}

.xnode__onlay.is-off {
   display: flex;
   animation-name: onlayLayer_Off;
   animation-duration: .4s
}

.xnode__leads {
   display: grid;
   grid-template-columns: [wide-start] 1fr [main-start] minmax(0, var(--appMaxWidth)) [main-end] 1fr [wide-end]
}

@media (min-width: 1340px) {
   .anim-hero .xnode__leads {
      overflow: hidden
   }
}

.xnode__main {
   z-index: 100;
   display: grid;
   grid-template-columns: [wide-start] 1fr [main-start] minmax(0, var(--appMaxWidth)) [main-end] 1fr [wide-end];
   padding-bottom: clamp(72px, 6.8vw, 104px)
}

.xnode__main.mod-spec {
   padding: 0
}

.xnode__extra {
   z-index: 100;
   display: grid;
   grid-template-columns: [wide-start] 1fr [main-start] minmax(0, var(--appMaxWidth)) [main-end] 1fr [wide-end]
}

.navbar {
   z-index: 200;
   grid-column: wide;
   transition: var(--transition_Base)
}

@media screen and (min-width: 1660px) and (hover: hover) {
   .navbar:hover {
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
   }
}

@media (min-width: 1660px) {

   .navbar:focus,
   .navbar:active {
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
   }
}

.navbar.mod-spec .navbar__block {
   border-bottom: 1px solid var(--colorGray_05)
}

.navbar__main {
   grid-column: main;
   display: flex;
   padding: 20px 0;
   column-gap: var(--gapsCol_Base)
}

.navbar__main .global-nav {
   margin-left: auto
}

@media (min-width: 480px) {
   .navbar__main .global-nav {
      margin-right: -20px
   }
}

@media (min-width: 480px) {

   .navbar__main .lang-toggle,
   .navbar__main .hero-order {
      padding-left: clamp(36px, 4.73vw, 64px)
   }
}

.navbar__fast {
   position: relative;
   grid-column: main;
   padding: 0 1px
}

.navbar__fast:before,
.navbar__fast:after {
   content: "";
   position: absolute;
   top: 8px;
   bottom: 8px;
   display: flex;
   width: 1px;
   background: var(--colorGray_05)
}

.navbar__fast:before {
   left: 0
}

.navbar__fast:after {
   right: 0
}

.cluster {
   display: grid;
   grid-column: main;
   column-gap: var(--gapsCol_Base);
   row-gap: var(--textMargin_Mega)
}

@media (min-width: 1000px) {
   .cluster {
      grid-template-columns: repeat(8, 1fr)
   }
}

@media (min-width: 1340px) {
   .cluster {
      grid-template-columns: repeat(12, 1fr)
   }
}

.cluster__main {
   position: relative;
   z-index: 10;
   display: grid
}

@media (min-width: 480px) {
   .cluster__main {
      padding: 0 52px
   }
}

@media (min-width: 1000px) {
   .cluster__main {
      grid-column: 1/span 6;
      padding-right: 64px
   }
}

@media (min-width: 1340px) {
   .cluster__main {
      grid-column: 4/span 6;
      grid-row: 1;
      padding: 0
   }
}

.cluster__aside {
   display: grid;
   grid-row: 1;
   align-items: flex-start;
   column-gap: var(--gapsRow_Base);
   row-gap: var(--gapsRow_Base)
}

@media (min-width: 480px) {
   .cluster__aside {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .cluster__aside {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media (min-width: 1000px) {
   .cluster__aside {
      grid-column: 7/span 2;
      grid-template-columns: repeat(1, 1fr);
      padding: 0
   }
}

@media (min-width: 1340px) {
   .cluster__aside {
      grid-column: 1/span 3
   }
}

@media (min-width: 1000px) {
   .cluster.mod-wide .cluster__main {
      grid-column: 1/span 7
   }
}

@media (min-width: 1340px) {
   .cluster.mod-wide .cluster__main {
      grid-column: 3/span 8
   }
}

@media (min-width: 1340px) {
   .cluster.mod-item .cluster__main {
      grid-column: 4/span 9
   }
}

.module-base {
   grid-column: main;
   display: flex;
   flex-direction: column
}

.module-grid {
   grid-column: main;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   column-gap: var(--gapsCol_Base)
}

@media (min-width: 760px) {
   .module-grid {
      grid-template-columns: repeat(8, 1fr)
   }
}

@media (min-width: 1340px) {
   .module-grid {
      grid-template-columns: repeat(12, 1fr)
   }
}

.module-spec {
   grid-column: wide
}

.section {
   display: grid;
   grid-template-columns: [wide-start] 1fr [main-start] minmax(0, var(--appMaxWidth)) [main-end] 1fr [wide-end];
   padding: 0 clamp(16px, 4.175vw, 32px)
}

.section-grid {
   display: grid;
   grid-column: wide;
   grid-template-columns: [wide-start] 1fr [main-start] minmax(0, var(--appMaxWidth)) [main-end] 1fr [wide-end];
   background-size: cover;
   background-repeat: no-repeat;
   padding: 0 clamp(16px, 4.175vw, 32px)
}

.section-fluid {
   display: grid;
   grid-column: wide;
   grid-template-columns: [wide-start] 1fr [main-start] minmax(0, var(--appMaxWidth)) [main-end] 1fr [wide-end]
}

.section-grid.mod-hero {
   overflow: hidden
}

.section-grid.mod-hero:before,
.section-grid.mod-hero:after {
   content: "";
   position: absolute;
   top: -80px;
   right: 0;
   left: 0;
   height: 980px
}

@media (min-width: 1340px) {

   .section-grid.mod-hero:before,
   .section-grid.mod-hero:after {
      height: 980px
   }
}

.section-grid.mod-hero:before {
   z-index: 10;
   animation: colorLoading 1s forwards 3s;
   background: radial-gradient(circle at 120% 60%, rgba(113, 25, 231, .15) 0%, var(--colorBlack) 75%);
   opacity: 0
}

@media (min-width: 1000px) {
   .section-grid.mod-hero:before {
      background: radial-gradient(circle at 110% 70%, rgba(113, 25, 231, .15) 0%, var(--colorBlack) 75%)
   }
}

@media (min-width: 1340px) {
   .section-grid.mod-hero:before {
      background: radial-gradient(circle at 130% 90%, rgba(113, 25, 231, .2) 0%, var(--colorBlack) 75%);
      animation-delay: 4.5s
   }
}

.section-grid.mod-hero:after {
   z-index: 30;
   background: linear-gradient(0deg, var(--colorBlack) 0%, rgba(0, 0, 0, .5) 5%, transparent 50%, rgba(0, 0, 0, .5) 95%, var(--colorBlack) 100%), linear-gradient(335deg, transparent 25%, var(--colorAccent_Hero))
}

@media (min-width: 1340px) {
   .section-grid.mod-hero:after {
      background: linear-gradient(335deg, transparent 25%, var(--colorAccent_Hero)), linear-gradient(0deg, var(--colorBlack) 25%, transparent 50%, var(--colorBlack) 75%)
   }
}

.section.mod-glow {
   position: relative;
   grid-column: wide;
   border-top: 1px solid var(--colorGray_05)
}

.section.mod-glow:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   z-index: 20;
   width: 60%;
   height: 1px;
   background: linear-gradient(90deg, rgba(113, 25, 231, .35), transparent);
   animation: glowPulse 9s linear infinite
}

@font-face {
   src: url(./kode-mono_bold-Cja-YST5.woff2) format("woff2");
   font-display: swap;
   font-family: Kode Mono;
   font-weight: 700;
   font-style: normal
}

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

@font-face {
   src: url(./jetbrains-mono_bold-WHotm33_.woff2) format("woff2");
   font-display: swap;
   font-family: JetBrains Mono;
   font-weight: 700;
   font-style: normal
}

.wysiwyg>*:first-child {
   margin-top: 0
}

.wysiwyg section *:first-child {
   margin-top: 0
}

.wysiwyg section {
   margin-top: var(--textMargin_Mega)
}

.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4 {
   line-height: var(--lineHeight_Hx);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorTitle);
   text-transform: uppercase
}

.wysiwyg h2 {
   margin-top: var(--textMargin_Plus);
   font-size: var(--fontSize_H2)
}

.wysiwyg h2+h3 {
   margin-top: var(--textMargin_Base)
}

.wysiwyg h2:before {
   content: "#";
   margin-right: .6em;
   color: var(--colorAccent)
}

@media (min-width: 1340px) {
   .wysiwyg h2:before {
      color: var(--colorGray_10)
   }
}

@media (min-width: 480px) {
   .wysiwyg h2:before {
      margin-left: -1.25em
   }
}

.wysiwyg h3 {
   margin-top: var(--textMargin_Plus);
   font-size: var(--fontSize_H3);
   text-transform: lowercase
}

.wysiwyg h3+h4 {
   margin-top: var(--textMargin_Base)
}

.wysiwyg h3+ul,
.wysiwyg h3+ol {
   margin-top: var(--textMargin_Base)
}

.wysiwyg p {
   margin-top: var(--textMargin_Plus)
}

.wysiwyg p+.wysiwyg p {
   margin-top: var(--textMargin_Plus)
}

.wysiwyg p+ul,
.wysiwyg p+ol {
   margin-top: var(--textMargin_Base)
}

.wysiwyg p>img {
   margin-top: var(--textMargin_Base)
}

.wysiwyg p>iframe {
   width: 100%;
   margin-top: var(--textMargin_Base);
   margin-bottom: var(--textMargin_Mini)
}

.wysiwyg i,
.wysiwyg em {
   font-style: italic
}

.wysiwyg b,
.wysiwyg strong {
   font-weight: var(--fontWeight_Main);
   color: var(--colorInvert)
}

.wysiwyg ul,
.wysiwyg ol {
   margin-top: var(--textMargin_Plus)
}

.wysiwyg ul+p,
.wysiwyg ul+ul,
.wysiwyg ul+ol,
.wysiwyg ol+p,
.wysiwyg ol+ul,
.wysiwyg ol+ol {
   margin-top: var(--textMargin_Base)
}

.wysiwyg ul>li,
.wysiwyg ol>li {
   position: relative;
   margin-top: var(--textMargin_Mini);
   padding-left: 1.95em
}

.wysiwyg ul>li ul,
.wysiwyg ol>li ul {
   margin-top: var(--textMargin_Mini)
}

.wysiwyg ul li:before,
.wysiwyg ol li:before {
   position: absolute;
   top: 0;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorGray_50)
}

.wysiwyg ul li:before {
   content: "-";
   left: 0;
   font-size: 1em
}

.wysiwyg ol {
   counter-reset: myCounter
}

.wysiwyg ol li:before {
   counter-increment: myCounter;
   content: counter(myCounter) ".";
   left: .05em;
   color: var(--colorGray_50)
}

.wysiwyg blockquote {
   margin: 1.4rem 0 1.4rem 2px;
   padding: 1.4rem 20px 1.4rem 24px;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_H3);
   font-style: italic;
   background: var(--colorGray_03);
   border-left: 3px solid var(--colorAccent_Light);
   border-radius: var(--borderRadius_Mini)
}

.wysiwyg blockquote>*:first-child {
   margin-top: 0
}

.wysiwyg a {
   color: var(--colorAccent);
   text-decoration-color: var(--colorAccent);
   transition: var(--transition_Text);
   cursor: pointer
}

@media screen and (hover: hover) {
   .wysiwyg a:hover {
      color: var(--colorInvert);
      text-decoration-color: var(--colorInvert)
   }
}

.wysiwyg a:focus,
.wysiwyg a:active {
   color: var(--colorInvert);
   text-decoration-color: var(--colorInvert)
}

.wysiwyg .preform {
   margin-top: var(--textMargin_Plus)
}

[class*=button-] {
   position: relative;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   white-space: nowrap;
   line-height: 1;
   font-weight: var(--fontWeight_Bold);
   font-size: var(--fontSize_Main);
   color: var(--colorAccent);
   transition: var(--transition_Base)
}

[class*=button-].mod-plus {
   height: var(--buttonSize_Plus);
   font-size: var(--fontSize_Main)
}

.button-main {
   height: var(--buttonSize_Base);
   padding-inline: 20px;
   text-transform: lowercase;
   border: 1px solid var(--colorAccent);
   border-radius: 4px 0;
   box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
}

.button-main:before,
.button-main:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 12px;
   height: 12px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.button-main:before {
   top: -6px;
   left: -6px;
   border-right: 1px solid var(--colorAccent)
}

.button-main:after {
   right: -6px;
   bottom: -6px;
   border-left: 1px solid var(--colorAccent)
}

@media screen and (hover: hover) {
   .button-main:hover {
      color: var(--colorInvert);
      border-color: var(--colorInvert);
      box-shadow: inset 0 0 7px 2px var(--colorInvert_Dark)
   }

   .button-main:hover:before,
   .button-main:hover:after {
      border-color: var(--colorInvert)
   }
}

.button-main:focus,
.button-main:active {
   color: var(--colorInvert);
   border-color: var(--colorInvert);
   box-shadow: inset 0 0 7px 2px var(--colorInvert_Dark)
}

.button-main:focus:before,
.button-main:focus:after,
.button-main:active:before,
.button-main:active:after {
   border-color: var(--colorInvert)
}

.check {
   position: relative;
   display: inline-flex
}

@media screen and (hover: hover) {
   .check:hover .check__input:not([disabled])~.check__title {
      color: var(--colorAccent)
   }

   .check:hover .check__input:not([disabled])~.check__title:before {
      border-color: var(--colorAccent)
   }

   .check:hover .check__input:not([disabled])~.check__title:after {
      color: var(--colorText)
   }

   .check:hover .check__input:not([disabled]):checked~.check__title:before {
      border-color: var(--colorAccent)
   }
}

.check:focus .check__input:not([disabled])~.check__title,
.check:active .check__input:not([disabled])~.check__title {
   color: var(--colorAccent)
}

.check:focus .check__input:not([disabled])~.check__title:before,
.check:active .check__input:not([disabled])~.check__title:before {
   border-color: var(--colorAccent)
}

.check:focus .check__input:not([disabled])~.check__title:after,
.check:active .check__input:not([disabled])~.check__title:after {
   color: var(--colorText)
}

.check:focus .check__input:not([disabled]):checked~.check__title:before,
.check:active .check__input:not([disabled]):checked~.check__title:before {
   border-color: var(--colorAccent)
}

.check__title {
   position: relative;
   display: flex;
   min-height: var(--checkSize_Base);
   padding-left: calc(var(--checkSize_Base) + 12px);
   font-family: var(--fontFamily_Main);
   color: var(--colorTitle);
   transition: var(--transition_Text)
}

.check__title:before,
.check__title:after {
   content: "";
   position: absolute;
   top: 2px;
   left: 0;
   display: flex;
   width: var(--checkSize_Base);
   height: var(--checkSize_Base);
   transition: var(--transition_Text)
}

.check__title:before {
   background: var(--colorWhite);
   border: 1px solid var(--colorGray_04);
   border-radius: var(--borderRadius_Mini)
}

.check__title:after {
   text-align: center
}

.check__input {
   position: absolute;
   top: 0;
   left: 0;
   z-index: -10;
   opacity: 0
}

.check__input:checked+.check__title:before {
   border-color: var(--colorAccent)
}

.check__input:checked+.check__title:after {
   top: 3px;
   left: 2px;
   width: var(--checkSize_Base);
   height: var(--checkSize_Base);
   background-size: 12px 12px;
   background-position: center;
   background-repeat: no-repeat
}

.check__input:disabled~.check__title {
   opacity: .5
}

@keyframes colorLoading {
   0% {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes colorLoading_Accent {
   0% {
      color: var(--colorGray_50);
      fill: var(--colorGray_50)
   }

   to {
      color: var(--colorAccent);
      fill: var(--colorAccent)
   }
}

@keyframes elementRotate {
   0% {
      transform: rotate(0)
   }

   97% {
      transform: rotate(0)
   }

   to {
      transform: rotate(60deg)
   }
}

@keyframes elementRotate_Quarter {
   0% {
      transform: rotate(0)
   }

   97% {
      transform: rotate(0)
   }

   to {
      transform: rotate(90deg)
   }
}

@keyframes glowPulse {
   0% {
      box-shadow: 0 0 7px 1px #7119e71a
   }

   50% {
      box-shadow: 0 0 7px 1px #7119e759
   }

   to {
      box-shadow: 0 0 7px 1px #7119e71a
   }
}

@keyframes onlayLayer_On {
   0% {
      opacity: 0;
      transform: translate(-150vw)
   }

   1% {
      opacity: 0;
      transform: translate(0)
   }

   to {
      opacity: 1
   }
}

@keyframes onlayLayer_Off {
   0% {
      opacity: 1
   }

   99% {
      opacity: 0;
      transform: translate(0)
   }

   to {
      opacity: 0;
      transform: translate(-150vw)
   }
}

@keyframes textCaretFade {
   0% {
      color: var(--colorBlack);
      opacity: 0
   }

   9.5% {
      color: var(--colorAccent);
      text-shadow: 0 0 2.5em var(--colorAccent);
      opacity: 1
   }

   15.5% {
      color: var(--colorAccent);
      text-shadow: 0 0 2.5em var(--colorAccent);
      opacity: 1
   }

   25% {
      color: var(--colorBlack);
      opacity: 0
   }

   34.5% {
      color: var(--colorNotes);
      text-shadow: 0 0 2.5em var(--colorNotes);
      opacity: 1
   }

   40.5% {
      color: var(--colorNotes);
      text-shadow: 0 0 2.5em var(--colorNotes);
      opacity: 1
   }

   50% {
      color: var(--colorBlack);
      opacity: 0
   }

   59.5% {
      color: var(--colorInvert);
      text-shadow: 0 0 2.5em var(--colorInvert);
      opacity: 1
   }

   65.5% {
      color: var(--colorInvert);
      text-shadow: 0 0 2.5em var(--colorInvert);
      opacity: 1
   }

   75% {
      color: var(--colorBlack);
      opacity: 0
   }

   84.5% {
      color: var(--colorProjects);
      text-shadow: 0 0 2.5em var(--colorProjects);
      opacity: 1
   }

   90.5% {
      color: var(--colorProjects);
      text-shadow: 0 0 2.5em var(--colorProjects);
      opacity: 1
   }

   to {
      color: var(--colorBlack);
      opacity: 0
   }
}

@keyframes textColorSwitch {
   0% {
      color: var(--colorGray_50)
   }

   12.5% {
      color: var(--colorAccent);
      text-shadow: 0 0 2em var(--colorAccent)
   }

   37.5% {
      color: var(--colorNotes);
      text-shadow: 0 0 2em var(--colorNotes)
   }

   62.5% {
      color: var(--colorInvert);
      text-shadow: 0 0 2em var(--colorInvert)
   }

   87.5% {
      color: var(--colorProjects);
      text-shadow: 0 0 2em var(--colorProjects)
   }

   to {
      color: var(--colorGray_50)
   }
}

@keyframes textColorSwitch_Accent {
   0% {
      color: var(--colorGray_10)
   }

   to {
      color: var(--colorAccent);
      text-shadow: 0 0 2em var(--colorAccent)
   }
}

@keyframes unrealLogo_Stroke {
   0% {
      stroke: var(--colorBlack)
   }

   to {
      stroke: var(--colorAccent)
   }
}

@keyframes unrealLogo_Glow {
   0% {
      filter: drop-shadow(0 0 0 var(--colorAccent))
   }

   to {
      filter: drop-shadow(0 0 7px var(--colorAccent))
   }
}

.header {
   display: flex;
   flex-direction: column;
   row-gap: 20px
}

.header__title {
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_H2);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   letter-spacing: var(--letterSpacing_Hx);
   text-transform: uppercase
}

.header__title:before,
.header__title:after {
   display: inline-flex;
   color: var(--colorGray_10);
   transition: var(--transition_Base)
}

@media (min-width: 480px) {
   .header__title:before {
      content: "#";
      margin: 0 .5em 0 -1.1em
   }
}

.header__title:after {
   content: "/";
   margin-left: .5em
}

.header__desc {
   display: flex;
   flex-direction: column;
   gap: 1em
}

[class*=icon-] {
   display: inline-flex;
   flex-shrink: 0;
   width: 24px;
   height: 24px;
   font-size: var(--fontSize_Main);
   background-size: 24px;
   background-repeat: no-repeat;
   background-position: center;
   -webkit-mask-size: contain;
   mask-size: contain
}

.icon-close {
   background-image: url(./close-DPQBEXf-.svg)
}

.icon-menu {
   background-image: url(./menu-BIu-pMlw.svg)
}

.image {
   background: #0000051a
}

.input {
   display: flex;
   flex-direction: column;
   row-gap: 6px
}

.input__label {
   font-family: var(--fontFamily_Extra);
   font-weight: var(--fontWeight_ExtraBold)
}

.input__main {
   display: inline-flex;
   width: 100%;
   height: var(--inputSize_Base);
   padding: 0 12px;
   white-space: nowrap;
   font-family: var(--fontFamily_Main);
   font-size: var(--fontSize_Main);
   color: var(--colorText);
   background-color: transparent;
   border: 1px solid var(--colorGray_10);
   border-radius: var(--borderRadius_Mini);
   transition: var(--transition_Base)
}

.input__main::placeholder {
   font-size: 0
}

.input__main:focus {
   color: var(--colorText);
   border-color: var(--colorAccent)
}

@media screen and (hover: hover) {
   .input__main:hover {
      border-color: var(--colorAccent)
   }
}

.input__main:active {
   border-color: var(--colorAccent)
}

.input__main[disabled=disabled],
.input__main[disabled] {
   opacity: .5
}

.modal {
   width: 100% !important;
   border-top: 3px solid var(--colorAccent);
   border-radius: var(--borderRadius_Mini)
}

.modal__wrap {
   display: flex;
   flex-direction: column
}

.modal__close {
   position: absolute;
   top: -3px;
   right: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   width: var(--buttonSize_Base);
   height: var(--buttonSize_Base);
   background: var(--colorAccent);
   border-radius: 0 var(--borderRadius_Mini) 0 var(--borderRadius_Mini);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .modal__close:hover {
      background: var(--colorAccent-hover)
   }
}

.modal__close:focus,
.modal__close:active {
   background: var(--colorAccent-hover)
}

.modal__close svg {
   width: 26px;
   height: 26px
}

.modal__header {
   margin-bottom: 36px
}

.modal__title {
   font-family: var(--fontFamily_Main);
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_H3);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorTitle);
   text-transform: uppercase
}

.modal__desc {
   margin-top: 12px
}

.modal__content {
   overflow: hidden;
   display: flex;
   width: 100%;
   flex-wrap: wrap;
   row-gap: 20px;
   border-radius: var(--borderRadius_Base)
}

.modal__item {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: flex-start;
   justify-content: flex-end;
   row-gap: 8px
}

.modal__item:last-of-type {
   margin-top: 8px;
   padding-top: 28px;
   border-top: 1px dashed var(--colorGray_50)
}

.modal__label {
   height: 20px;
   font-weight: var(--fontWeight_Bold);
   font-size: var(--fontSize_Hint);
   cursor: text;
   transition: var(--transition_Base)
}

.modal__action {
   width: 144px
}

.modal__hint {
   margin-top: 12px;
   font-size: var(--fontSize_Hint);
   color: var(--colorGray_20)
}

.preform {
   position: relative;
   display: grid;
   min-width: 0;
   border: 1px dashed var(--colorAccent_Dark)
}

@media (min-width: 1660px) {
   .preform {
      padding-top: 26px
   }
}

.preform:before,
.preform:after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   width: 32px
}

.preform:before {
   left: 0;
   background: linear-gradient(90deg, var(--colorBlack), transparent)
}

.preform:after {
   right: 0;
   background: linear-gradient(90deg, transparent, var(--colorBlack))
}

.preform pre {
   overflow-x: auto;
   padding: 0 24px
}

.preform__hint {
   content: "<- Just scroll ->";
   display: flex;
   justify-content: center;
   width: 100%;
   padding: 12px 0 20px;
   font-size: var(--fontSize_Hint);
   color: var(--colorAccent);
   text-transform: uppercase
}

@media (min-width: 1660px) {
   .preform__hint {
      display: none
   }
}

:root {
   --swiper-theme-color: #007aff
}

:host {
   display: block;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   z-index: 1
}

.swiper {
   display: block;
   list-style: none;
   margin-left: auto;
   margin-right: auto;
   overflow: hidden;
   padding: 0;
   position: relative;
   z-index: 1
}

.swiper-vertical>.swiper-wrapper {
   flex-direction: column
}

.swiper-wrapper {
   box-sizing: initial;
   display: flex;
   height: 100%;
   position: relative;
   transition-property: transform;
   transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
   width: 100%;
   z-index: 1
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
   transform: translateZ(0)
}

.swiper-horizontal {
   touch-action: pan-y
}

.swiper-vertical {
   touch-action: pan-x
}

.swiper-slide {
   display: block;
   flex-shrink: 0;
   height: 100%;
   position: relative;
   transition-property: transform;
   width: 100%
}

.swiper-slide-invisible-blank {
   visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
   height: auto
}

.swiper-autoheight .swiper-wrapper {
   align-items: flex-start;
   transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
   backface-visibility: hidden;
   transform: translateZ(0)
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
   perspective: 1200px
}

.swiper-3d .swiper-wrapper {
   transform-style: preserve-3d
}

.swiper-3d {
   perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
   transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
   overflow: auto;
   scrollbar-width: none;
   -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
   display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
   scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
   scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
   scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
   scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
   scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
   content: "";
   flex-shrink: 0;
   order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
   scroll-snap-align: center center;
   scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
   margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
   height: 100%;
   min-height: 1px;
   width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
   margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
   height: var(--swiper-centered-offset-after);
   min-width: 1px;
   width: 100%
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
   height: 100%;
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 10
}

.swiper-3d .swiper-slide-shadow {
   background: #00000026
}

.swiper-3d .swiper-slide-shadow-left {
   background-image: linear-gradient(270deg, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-right {
   background-image: linear-gradient(90deg, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-top {
   background-image: linear-gradient(0deg, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-bottom {
   background-image: linear-gradient(180deg, #00000080, #0000)
}

.swiper-lazy-preloader {
   border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
   border-radius: 50%;
   border-top: 4px solid rgba(0, 0, 0, 0);
   box-sizing: border-box;
   height: 42px;
   left: 50%;
   margin-left: -21px;
   margin-top: -21px;
   position: absolute;
   top: 50%;
   transform-origin: 50%;
   width: 42px;
   z-index: 10
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
   animation: swiper-preloader-spin 1s linear infinite
}

.swiper-lazy-preloader-white {
   --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
   --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
   0% {
      transform: rotate(0)
   }

   to {
      transform: rotate(1turn)
   }
}

.swiper-virtual .swiper-slide {
   -webkit-backface-visibility: hidden;
   transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper:after {
   content: "";
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper:after {
   height: 1px;
   width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper:after {
   height: var(--swiper-virtual-size);
   width: 1px
}

:root {
   --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
   align-items: center;
   color: var(--swiper-navigation-color, var(--swiper-theme-color));
   cursor: pointer;
   display: flex;
   height: var(--swiper-navigation-size);
   justify-content: center;
   position: absolute;
   width: var(--swiper-navigation-size);
   z-index: 10
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
   cursor: auto;
   opacity: .35;
   pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
   cursor: auto;
   opacity: 0;
   pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
   display: none !important
}

.swiper-button-next svg,
.swiper-button-prev svg {
   height: 100%;
   object-fit: contain;
   transform-origin: center;
   width: 100%;
   fill: currentColor;
   pointer-events: none
}

.swiper-button-lock {
   display: none
}

.swiper-button-next,
.swiper-button-prev {
   margin-top: calc(0px - var(--swiper-navigation-size) / 2);
   top: var(--swiper-navigation-top-offset, 50%)
}

.swiper-button-prev {
   left: var(--swiper-navigation-sides-offset, 4px);
   right: auto
}

.swiper-button-prev .swiper-navigation-icon {
   transform: rotate(180deg)
}

.swiper-button-next {
   left: auto;
   right: var(--swiper-navigation-sides-offset, 4px)
}

.swiper-horizontal .swiper-button-next,
.swiper-horizontal .swiper-button-prev,
.swiper-horizontal~.swiper-button-next,
.swiper-horizontal~.swiper-button-prev {
   margin-left: 0;
   margin-top: calc(0px - var(--swiper-navigation-size) / 2);
   top: var(--swiper-navigation-top-offset, 50%)
}

.swiper-horizontal.swiper-rtl .swiper-button-next,
.swiper-horizontal.swiper-rtl~.swiper-button-next,
.swiper-horizontal~.swiper-button-prev,
.swiper-horizontal .swiper-button-prev {
   left: var(--swiper-navigation-sides-offset, 4px);
   right: auto
}

.swiper-horizontal.swiper-rtl .swiper-button-prev,
.swiper-horizontal.swiper-rtl~.swiper-button-prev,
.swiper-horizontal~.swiper-button-next,
.swiper-horizontal .swiper-button-next {
   left: auto;
   right: var(--swiper-navigation-sides-offset, 4px)
}

.swiper-horizontal.swiper-rtl .swiper-button-next .swiper-navigation-icon,
.swiper-horizontal.swiper-rtl~.swiper-button-next .swiper-navigation-icon,
.swiper-horizontal~.swiper-button-prev .swiper-navigation-icon,
.swiper-horizontal .swiper-button-prev .swiper-navigation-icon {
   transform: rotate(180deg)
}

.swiper-horizontal.swiper-rtl .swiper-button-prev .swiper-navigation-icon,
.swiper-horizontal.swiper-rtl~.swiper-button-prev .swiper-navigation-icon {
   transform: rotate(0)
}

.swiper-vertical .swiper-button-next,
.swiper-vertical .swiper-button-prev,
.swiper-vertical~.swiper-button-next,
.swiper-vertical~.swiper-button-prev {
   left: var(--swiper-navigation-top-offset, 50%);
   margin-left: calc(0px - var(--swiper-navigation-size) / 2);
   margin-top: 0;
   right: auto
}

.swiper-vertical .swiper-button-prev,
.swiper-vertical~.swiper-button-prev {
   bottom: auto;
   top: var(--swiper-navigation-sides-offset, 4px)
}

.swiper-vertical .swiper-button-prev .swiper-navigation-icon,
.swiper-vertical~.swiper-button-prev .swiper-navigation-icon {
   transform: rotate(-90deg)
}

.swiper-vertical .swiper-button-next,
.swiper-vertical~.swiper-button-next {
   bottom: var(--swiper-navigation-sides-offset, 4px);
   top: auto
}

.swiper-vertical .swiper-button-next .swiper-navigation-icon,
.swiper-vertical~.swiper-button-next .swiper-navigation-icon {
   transform: rotate(90deg)
}

.swiper-pagination {
   position: absolute;
   text-align: center;
   transform: translateZ(0);
   transition: opacity .3s;
   z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
   opacity: 0
}

.swiper-pagination.swiper-pagination-disabled,
.swiper-pagination-disabled>.swiper-pagination {
   display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
   bottom: var(--swiper-pagination-bottom, 8px);
   left: 0;
   top: var(--swiper-pagination-top, auto);
   width: 100%
}

.swiper-pagination-bullets-dynamic {
   font-size: 0;
   overflow: hidden
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   position: relative;
   transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
   transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
   transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
   transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
   transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
   transform: scale(.33)
}

button.swiper-pagination-bullet {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: none;
   box-shadow: none;
   margin: 0;
   padding: 0
}

.swiper-pagination-bullet {
   background: var(--swiper-pagination-bullet-inactive-color, #000);
   border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
   display: inline-block;
   height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
   opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
   width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px))
}

.swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer
}

.swiper-pagination-bullet:only-child {
   display: none !important
}

.swiper-pagination-bullet-active {
   background: var(--swiper-pagination-color, var(--swiper-theme-color));
   opacity: var(--swiper-pagination-bullet-opacity, 1)
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
   left: var(--swiper-pagination-left, auto);
   right: var(--swiper-pagination-right, 8px);
   top: 50%;
   transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
   display: block;
   margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
   top: 50%;
   transform: translateY(-50%);
   width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   display: inline-block;
   transition: transform .2s, top .2s
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
   left: 50%;
   transform: translate(-50%);
   white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   transition: transform .2s, left .2s
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   transition: transform .2s, right .2s
}

.swiper-pagination-fraction {
   color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
   background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .2509803922));
   position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
   background: var(--swiper-pagination-color, var(--swiper-theme-color));
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   transform: scale(0);
   transform-origin: left top;
   width: 100%
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
   transform-origin: right top
}

.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
   height: var(--swiper-pagination-progressbar-size, 4px);
   left: 0;
   top: 0;
   width: 100%
}

.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar {
   height: 100%;
   left: 0;
   top: 0;
   width: var(--swiper-pagination-progressbar-size, 4px)
}

.swiper-pagination-lock {
   display: none
}

.swiper-scrollbar {
   background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1019607843));
   border-radius: var(--swiper-scrollbar-border-radius, 10px);
   position: relative;
   touch-action: none
}

.swiper-scrollbar.swiper-scrollbar-disabled,
.swiper-scrollbar-disabled>.swiper-scrollbar {
   display: none !important
}

.swiper-scrollbar.swiper-scrollbar-horizontal,
.swiper-horizontal>.swiper-scrollbar {
   bottom: var(--swiper-scrollbar-bottom, 4px);
   height: var(--swiper-scrollbar-size, 4px);
   left: var(--swiper-scrollbar-sides-offset, 1%);
   position: absolute;
   top: var(--swiper-scrollbar-top, auto);
   width: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2);
   z-index: 50
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical>.swiper-scrollbar {
   height: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2);
   left: var(--swiper-scrollbar-left, auto);
   position: absolute;
   right: var(--swiper-scrollbar-right, 4px);
   top: var(--swiper-scrollbar-sides-offset, 1%);
   width: var(--swiper-scrollbar-size, 4px);
   z-index: 50
}

.swiper-scrollbar-drag {
   background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5019607843));
   border-radius: var(--swiper-scrollbar-border-radius, 10px);
   height: 100%;
   left: 0;
   position: relative;
   top: 0;
   width: 100%
}

.swiper-scrollbar-cursor-drag {
   cursor: move
}

.swiper-scrollbar-lock {
   display: none
}

.swiper-zoom-container {
   align-items: center;
   display: flex;
   height: 100%;
   justify-content: center;
   text-align: center;
   width: 100%
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
   max-height: 100%;
   max-width: 100%;
   object-fit: contain
}

.swiper-slide-zoomed {
   cursor: move;
   touch-action: none
}

.swiper .swiper-notification {
   left: 0;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
   z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
   margin: 0 auto;
   transition-timing-function: ease-out
}

.swiper-grid>.swiper-wrapper {
   flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
   flex-direction: column;
   flex-wrap: wrap
}

.swiper-fade.swiper-free-mode .swiper-slide {
   transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
   pointer-events: none;
   transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
   pointer-events: none
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
   pointer-events: auto
}

.swiper.swiper-cube {
   overflow: visible
}

.swiper-cube .swiper-slide {
   backface-visibility: hidden;
   height: 100%;
   pointer-events: none;
   transform-origin: 0 0;
   visibility: hidden;
   width: 100%;
   z-index: 1
}

.swiper-cube .swiper-slide .swiper-slide {
   pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
   transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
   pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
   pointer-events: auto;
   visibility: visible
}

.swiper-cube .swiper-cube-shadow {
   bottom: 0;
   height: 100%;
   left: 0;
   opacity: .6;
   position: absolute;
   width: 100%;
   z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
   background: #000;
   bottom: 0;
   content: "";
   filter: blur(50px);
   left: 0;
   position: absolute;
   right: 0;
   top: 0
}

.swiper-cube .swiper-slide-next+.swiper-slide {
   pointer-events: auto;
   visibility: visible
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
   backface-visibility: hidden;
   z-index: 0
}

.swiper.swiper-flip {
   overflow: visible
}

.swiper-flip .swiper-slide {
   backface-visibility: hidden;
   pointer-events: none;
   z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
   pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
   pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
   backface-visibility: hidden;
   z-index: 0
}

.swiper-creative .swiper-slide {
   backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height
}

.swiper.swiper-cards {
   overflow: visible
}

.swiper-cards .swiper-slide {
   backface-visibility: hidden;
   overflow: hidden;
   transform-origin: center bottom
}

.overview {
   display: grid;
   row-gap: var(--textMargin_Mega)
}

.overview__block {
   display: grid;
   row-gap: var(--textMargin_Plus)
}

@media screen and (hover: hover) {

   .overview__block:hover .header__title:before,
   .overview__block:hover .header__title:after {
      color: var(--colorAccent) !important
   }
}

.overview__block:focus .header__title:before,
.overview__block:focus .header__title:after,
.overview__block:active .header__title:before,
.overview__block:active .header__title:after {
   color: var(--colorAccent) !important
}

.overview__item {
   display: flex;
   column-gap: 12px;
   padding: 12px 0;
   border-top: 1px dashed var(--colorGray_05);
   transition: var(--transition_Text)
}

.overview__item:last-child {
   border-bottom: 1px dashed var(--colorGray_05)
}

@media screen and (hover: hover) {
   .overview__item:hover {
      color: var(--colorWhite)
   }

   .overview__item:hover .overview__open {
      background: var(--colorGray_40)
   }
}

.overview__item:focus,
.overview__item:active {
   color: var(--colorWhite)
}

.overview__item:focus .overview__open,
.overview__item:active .overview__open {
   background: var(--colorGray_40)
}

.overview__status {
   display: flex;
   flex-shrink: 0;
   justify-content: center;
   width: 20px
}

.overview__name {
   flex-grow: 1;
   padding-right: 12px
}

.overview__open {
   display: flex;
   flex-shrink: 0;
   width: var(--buttonSize_Base);
   height: var(--buttonSize_Base);
   margin: -7px -6px -8px;
   font-size: 0;
   background: var(--colorGray_50);
   -webkit-mask-size: 24px;
   mask-size: 24px;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   transition: var(--transition_Base)
}

.overview__open.mod-code {
   -webkit-mask-image: url(./preview-DfeT8nqy.svg);
   mask-image: url(./preview-DfeT8nqy.svg)
}

.overview__open.mod-site {
   -webkit-mask-image: url(./global-D31XthiH.svg);
   mask-image: url(./global-D31XthiH.svg)
}

@media screen and (hover: hover) {
   .overview__open:hover {
      background: var(--colorAccent) !important
   }
}

.overview__open:focus,
.overview__open:active {
   background: var(--colorAccent) !important
}

.product-page {
   display: grid;
   row-gap: var(--textMargin_Mega)
}

.product-page__block {
   display: grid;
   row-gap: var(--textMargin_Plus)
}

@media screen and (hover: hover) {

   .product-page__block:hover .header__title:before,
   .product-page__block:hover .header__title:after {
      color: var(--colorAccent) !important
   }
}

.product-page__block:focus .header__title:before,
.product-page__block:focus .header__title:after,
.product-page__block:active .header__title:before,
.product-page__block:active .header__title:after {
   color: var(--colorAccent) !important
}

.recent-posts {
   row-gap: 40px
}

@media (min-width: 480px) {
   .recent-posts {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .recent-posts {
      padding: 0
   }
}

.recent-posts__header {
   grid-column: 1/span 4
}

@media (min-width: 760px) {
   .recent-posts__header {
      grid-column: 2/span 6
   }
}

@media (min-width: 1340px) {
   .recent-posts__header {
      grid-column: 2/span 10
   }
}

.recent-posts__feed {
   overflow: hidden;
   display: grid;
   grid-column: 1/span 4;
   gap: var(--gapsCol_Base)
}

@media (min-width: 760px) {
   .recent-posts__feed {
      grid-column: 2/span 6
   }
}

@media (min-width: 1000px) {
   .recent-posts__feed {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media (min-width: 1340px) {
   .recent-posts__feed {
      grid-column: 2/span 10
   }
}

.video-post {
   display: flex;
   flex-direction: column
}

.video-post__main {
   position: relative;
   display: flex;
   width: 100%;
   aspect-ratio: 16/9;
   outline: 1px solid var(--colorAccent_Dark);
   box-shadow: 0 0 280px #7119e740;
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .video-post__main:hover {
      outline-color: var(--colorAccent);
      box-shadow: 0 0 280px #7119e759
   }
}

.video-post__main:focus,
.video-post__main:active {
   outline-color: var(--colorAccent);
   box-shadow: 0 0 280px #7119e759
}

.video-post__main img {
   width: 100%;
   height: auto
}

.video-post__main iframe {
   width: 100%;
   height: auto;
   aspect-ratio: 16/9
}

.video-post__play {
   position: absolute;
   top: 50%;
   left: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: -28px 0 0 -28px;
   width: var(--buttonSize_Plus);
   height: var(--buttonSize_Plus);
   color: var(--colorInvert);
   background: var(--colorBlack);
   border: 2px solid var(--colorInvert);
   border-radius: 50%;
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .video-post__play:hover {
      color: var(--colorWhite);
      background: var(--colorInvert)
   }
}

.video-post__play:focus,
.video-post__play:active {
   color: var(--colorWhite);
   background: var(--colorInvert)
}

.video-post__play svg {
   width: 28px;
   height: 28px;
   margin-left: 1px;
   transition: var(--transition_Base)
}

.video-post__desc {
   margin-top: var(--textMargin_Wide)
}

@media (min-width: 480px) {
   .video-post__desc {
      padding: 0 52px
   }
}

@media (min-width: 1000px) {
   .video-post__desc {
      grid-column: 1/span 8;
      padding-right: 64px
   }
}

@media (min-width: 1340px) {
   .video-post__desc {
      padding: 0
   }
}

.video-post__extra {
   display: flex;
   justify-content: center;
   margin-top: var(--textMargin_Wide);
   column-gap: 12px
}

@media (min-width: 480px) {
   .video-post__extra {
      padding: 0 52px
   }
}

@media (min-width: 1000px) {
   .video-post__extra {
      grid-column: 1/span 8;
      padding-right: 64px
   }
}

@media (min-width: 1340px) {
   .video-post__extra {
      padding: 0
   }
}

.video-post__more {
   flex-direction: column;
   align-items: center;
   height: auto;
   padding: 12px 16px 14px;
   row-gap: 6px;
   white-space: wrap;
   line-height: var(--lineHeight_Hx)
}

.video-post__more span {
   display: flex;
   text-transform: uppercase
}

.video-post__more small {
   display: flex;
   font-weight: var(--fontWeight_Main);
   color: var(--colorGray_30);
   text-align: center;
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .video-post__more:hover small {
      color: var(--colorGray_30)
   }
}

.video-post__more:focus small,
.video-post__more:active small {
   color: var(--colorGray_30)
}

.app-logo {
   flex-shrink: 0
}

.app-logo__main {
   display: flex;
   align-items: center;
   height: var(--buttonSize_Base);
   column-gap: 16px;
   font-family: var(--fontFamily_Extra);
   font-size: 22px;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   text-transform: uppercase;
   letter-spacing: .02em
}

@media screen and (hover: hover) {
   a.app-logo__main:hover .app-logo__image {
      fill: var(--colorInvert) !important
   }
}

a.app-logo__main:focus .app-logo__image,
a.app-logo__main:active .app-logo__image {
   fill: var(--colorInvert) !important
}

.app-logo__image {
   flex-shrink: 0;
   width: 39px;
   height: 39px;
   animation: colorLoading_Accent 1s forwards, elementRotate 12s infinite
}

.app-logo__image path {
   transition: var(--transition_Base)
}

.app-logo__name {
   display: flex
}

.app-logo__name i {
   display: inline-flex;
   margin: -2px -3px 0;
   color: var(--colorInvert)
}

.anim-hero .app-logo__image {
   animation-delay: 2.5s
}

@media (min-width: 1340px) {
   .anim-hero .app-logo__image {
      animation-delay: 3s
   }
}

.app-logo.mod-quarter .app-logo__image {
   animation: colorLoading_Accent 1s forwards, elementRotate_Quarter 12s infinite
}

.app-logo__name.mod-bites i {
   margin: -1px -1px 0 -2px
}

.aside-block {
   overflow: hidden
}

@media (min-width: 1340px) {
   .aside-block {
      padding-right: clamp(72px, 6.83vw, 112px)
   }
}

@media (min-width: 760px) {
   .aside-block.mod-full {
      grid-column: 1/span 2
   }
}

@media (min-width: 1000px) {
   .aside-block.mod-full {
      grid-column: 1
   }
}

.aside-block.mod-sticky {
   position: sticky;
   top: 22px
}

.update-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   column-gap: 24px;
   row-gap: 8px;
   min-height: 152px;
   padding: 20px;
   border: 1px solid var(--colorGray_10);
   border-radius: 23px 0;
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .update-card:hover .update-card__date {
      color: var(--colorSpec)
   }
}

.update-card:focus .update-card__date,
.update-card:active .update-card__date {
   color: var(--colorSpec)
}

@media (min-width: 760px) {
   .update-card {
      padding: 24px 32px 26px 24px
   }
}

@media (min-width: 1340px) {
   .update-card {
      flex-direction: row;
      min-height: 168px;
      padding-bottom: 24px
   }
}

@media (min-width: 1660px) {
   .update-card {
      min-height: 176px;
      padding: 28px 40px 24px 28px
   }
}

.update-card:before,
.update-card:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 30px;
   height: 30px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.update-card:before {
   top: -15px;
   left: -15px;
   border-right: 1px solid var(--colorGray_10)
}

.update-card:after {
   right: -15px;
   bottom: -15px;
   border-left: 1px solid var(--colorGray_10)
}

.update-card__title {
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Main);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   text-transform: uppercase;
   transition: var(--transition_Base)
}

.update-card__info {
   order: -1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-width: 152px;
   min-height: 78px;
   height: 100%
}

.update-card__date {
   display: flex;
   align-items: center;
   column-gap: 12px;
   line-height: 1.3;
   font-size: 11px;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorGray_50);
   text-transform: uppercase;
   transition: var(--transition_Base)
}

.update-card__date b {
   margin-top: 2px;
   height: 35px;
   font-family: var(--fontFamily_Extra);
   line-height: 1;
   font-size: 36px
}

.update-card__type {
   font-size: var(--fontSize_Hint);
   color: var(--colorGray_50);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .update-card.mod-nexus:hover {
      box-shadow: inset 0 0 30px 5px var(--colorAccent_Dark)
   }

   .update-card.mod-nexus:hover,
   .update-card.mod-nexus:hover:before,
   .update-card.mod-nexus:hover:after {
      border-color: var(--colorAccent)
   }

   .update-card.mod-nexus:hover .update-card__title {
      color: var(--colorAccent)
   }
}

.update-card.mod-nexus:focus,
.update-card.mod-nexus:active {
   box-shadow: inset 0 0 30px 5px var(--colorAccent_Dark)
}

.update-card.mod-nexus:focus,
.update-card.mod-nexus:focus:before,
.update-card.mod-nexus:focus:after,
.update-card.mod-nexus:active,
.update-card.mod-nexus:active:before,
.update-card.mod-nexus:active:after {
   border-color: var(--colorAccent)
}

.update-card.mod-nexus:focus .update-card__title,
.update-card.mod-nexus:active .update-card__title {
   color: var(--colorAccent)
}

@media screen and (hover: hover) {
   .update-card.mod-work:hover {
      box-shadow: inset 0 0 30px 5px var(--colorProjects_Dark)
   }

   .update-card.mod-work:hover,
   .update-card.mod-work:hover:before,
   .update-card.mod-work:hover:after {
      border-color: var(--colorProjects)
   }

   .update-card.mod-work:hover .update-card__title {
      color: var(--colorProjects)
   }
}

.update-card.mod-work:focus,
.update-card.mod-work:active {
   box-shadow: inset 0 0 30px 5px var(--colorProjects_Dark)
}

.update-card.mod-work:focus,
.update-card.mod-work:focus:before,
.update-card.mod-work:focus:after,
.update-card.mod-work:active,
.update-card.mod-work:active:before,
.update-card.mod-work:active:after {
   border-color: var(--colorProjects)
}

.update-card.mod-work:focus .update-card__title,
.update-card.mod-work:active .update-card__title {
   color: var(--colorProjects)
}

@media screen and (hover: hover) {
   .update-card.mod-notes:hover {
      box-shadow: inset 0 0 30px 5px var(--colorNotes_Dark)
   }

   .update-card.mod-notes:hover,
   .update-card.mod-notes:hover:before,
   .update-card.mod-notes:hover:after {
      border-color: var(--colorNotes)
   }

   .update-card.mod-notes:hover .update-card__title {
      color: var(--colorNotes)
   }
}

.update-card.mod-notes:focus,
.update-card.mod-notes:active {
   box-shadow: inset 0 0 30px 5px var(--colorNotes_Dark)
}

.update-card.mod-notes:focus,
.update-card.mod-notes:focus:before,
.update-card.mod-notes:focus:after,
.update-card.mod-notes:active,
.update-card.mod-notes:active:before,
.update-card.mod-notes:active:after {
   border-color: var(--colorNotes)
}

.update-card.mod-notes:focus .update-card__title,
.update-card.mod-notes:active .update-card__title {
   color: var(--colorNotes)
}

@media screen and (hover: hover) {
   .update-card.mod-more:hover {
      box-shadow: inset 0 0 30px 5px var(--colorInvert_Dark)
   }

   .update-card.mod-more:hover,
   .update-card.mod-more:hover:before,
   .update-card.mod-more:hover:after {
      border-color: var(--colorInvert)
   }

   .update-card.mod-more:hover .update-card__title {
      color: var(--colorInvert)
   }
}

.update-card.mod-more:focus,
.update-card.mod-more:active {
   box-shadow: inset 0 0 30px 5px var(--colorInvert_Dark)
}

.update-card.mod-more:focus,
.update-card.mod-more:focus:before,
.update-card.mod-more:focus:after,
.update-card.mod-more:active,
.update-card.mod-more:active:before,
.update-card.mod-more:active:after {
   border-color: var(--colorInvert)
}

.update-card.mod-more:focus .update-card__title,
.update-card.mod-more:active .update-card__title {
   color: var(--colorInvert)
}

@media screen and (hover: hover) {
   .update-card.mod-info:hover {
      box-shadow: inset 0 0 30px 5px var(--colorNotify_Dark)
   }

   .update-card.mod-info:hover,
   .update-card.mod-info:hover:before,
   .update-card.mod-info:hover:after {
      border-color: var(--colorNotify)
   }

   .update-card.mod-info:hover .update-card__title {
      color: var(--colorNotify)
   }
}

.update-card.mod-info:focus,
.update-card.mod-info:active {
   box-shadow: inset 0 0 30px 5px var(--colorNotify_Dark)
}

.update-card.mod-info:focus,
.update-card.mod-info:focus:before,
.update-card.mod-info:focus:after,
.update-card.mod-info:active,
.update-card.mod-info:active:before,
.update-card.mod-info:active:after {
   border-color: var(--colorNotify)
}

.update-card.mod-info:focus .update-card__title,
.update-card.mod-info:active .update-card__title {
   color: var(--colorNotify)
}

.app-legal {
   display: grid;
   gap: var(--gapsCol_Base);
   padding: 36px 0 64px;
   font-family: var(--fontFamily_Extra)
}

.app-legal__desc {
   grid-column: span 4;
   display: flex;
   flex-direction: column;
   row-gap: 12px;
   color: var(--colorGray_40)
}

@media (min-width: 760px) {
   .app-legal__desc {
      grid-column: span 5
   }
}

.app-legal__desc span {
   color: var(--colorWhite)
}

.app-legal__devs {
   grid-column: span 4
}

@media (min-width: 760px) {
   .app-legal__devs {
      grid-column: span 3;
      text-align: right
   }
}

@media (min-width: 1340px) {
   .app-legal__devs {
      grid-column: span 7
   }
}

.app-legal__devs span {
   color: var(--colorWhite);
   transition: var(--transition_Base)
}

.app-legal__devs a {
   display: inline-block;
   margin: -12px -8px;
   padding: 12px 8px;
   color: var(--colorGray_40);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .app-legal__devs a:hover {
      color: var(--colorGray_30)
   }

   .app-legal__devs a:hover span {
      color: var(--colorInvert);
      text-shadow: 0 0 2rem var(--colorInvert)
   }
}

.app-legal__devs a:focus,
.app-legal__devs a:active {
   color: var(--colorGray_30)
}

.app-legal__devs a:focus span,
.app-legal__devs a:active span {
   color: var(--colorInvert);
   text-shadow: 0 0 2rem var(--colorInvert)
}

.content-index {
   position: relative;
   margin-top: 1px;
   padding: 24px 24px 20px;
   background: var(--colorBlack);
   border: 1px solid var(--colorAccent);
   border-radius: 23px 0;
   box-shadow: inset 0 0 20px 3px var(--colorAccent_Dark)
}

.content-index:before,
.content-index:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 30px;
   height: 30px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.content-index:before {
   top: -15px;
   left: -15px;
   border-right: 1px solid var(--colorAccent)
}

.content-index:after {
   right: -15px;
   bottom: -15px;
   border-left: 1px solid var(--colorAccent)
}

@media (min-width: 1000px) {
   .content-index {
      padding: 13px 0 0;
      border: 0;
      box-shadow: none
   }

   .content-index:before,
   .content-index:after {
      display: none
   }
}

@media (min-width: 1340px) {
   .content-index {
      padding-right: clamp(72px, 6.83vw, 112px)
   }
}

.content-index__title {
   margin-bottom: 12px;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Hint);
   color: var(--colorAccent);
   text-transform: uppercase
}

.content-index__list {
   position: relative
}

.content-index__list:before {
   content: "";
   position: absolute;
   top: -1px;
   right: 0;
   left: 0;
   z-index: 10;
   height: 3px;
   background: var(--colorBlack)
}

@media (min-width: 1000px) {
   .content-index__list:before {
      display: none
   }
}

@media (min-width: 760px) {
   .content-index__list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--gapsCol_Base)
   }
}

@media (min-width: 1000px) {
   .content-index__list {
      grid-template-columns: none;
      border-bottom: 1px dashed var(--colorGray_05)
   }
}

.content-index__item {
   position: relative
}

.content-index__item:not(:first-child) {
   border-top: 1px dashed var(--colorGray_05)
}

@media (min-width: 1000px) {
   .content-index__item:first-child {
      border-top: 1px dashed var(--colorGray_05)
   }
}

.content-index__item:before {
   content: "-";
   position: absolute;
   top: 7px;
   left: 0;
   font-size: 1em;
   color: var(--colorGray_20);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .content-index__item:hover:before {
      color: var(--colorInvert)
   }
}

.content-index__item:focus:before,
.content-index__item:active:before {
   color: var(--colorInvert)
}

.content-index__link {
   display: flex;
   padding: 10px 8px 12px 1.35em;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Hint);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .content-index__link:hover {
      color: var(--colorInvert)
   }
}

.content-index__link:focus,
.content-index__link:active {
   color: var(--colorInvert)
}

.crumbs-nav {
   overflow: auto;
   display: flex;
   padding: 0 15px;
   font-size: var(--fontSize_Hint);
   text-transform: uppercase
}

@media screen and (hover: hover) {

   .crumbs-nav:hover .crumbs-nav__item:before,
   .crumbs-nav:hover .crumbs-nav__item:after {
      color: var(--colorAccent)
   }
}

.crumbs-nav:focus .crumbs-nav__item:before,
.crumbs-nav:focus .crumbs-nav__item:after,
.crumbs-nav:active .crumbs-nav__item:before,
.crumbs-nav:active .crumbs-nav__item:after {
   color: var(--colorAccent)
}

.crumbs-nav__item {
   display: flex;
   flex-shrink: 0
}

.crumbs-nav__item:before,
.crumbs-nav__item:after {
   margin-right: .62em;
   padding: 8px 0 9px;
   color: var(--colorAccent);
   transition: var(--transition_Base)
}

@media (min-width: 1340px) {

   .crumbs-nav__item:before,
   .crumbs-nav__item:after {
      color: var(--colorGray_10)
   }
}

.crumbs-nav__item:not(:last-of-type):after {
   content: "/";
   margin-left: .62em
}

.crumbs-nav__item.mod-this:after {
   content: ".html"
}

.crumbs-nav__item.mod-back:before {
   content: "_"
}

@media (min-width: 1340px) {
   .crumbs-nav__item.mod-back:before {
      color: var(--colorGray_50)
   }
}

.crumbs-nav__here,
.crumbs-nav__link {
   display: inline-flex;
   padding: 8px 0 9px;
   transition: var(--transition_Base);
   cursor: default
}

.crumbs-nav__link {
   padding: 8px 0 9px;
   color: var(--colorText)
}

@media (min-width: 1340px) {
   .crumbs-nav__link {
      color: var(--colorGray_50)
   }
}

@media screen and (hover: hover) {
   .crumbs-nav__link:hover {
      color: var(--colorText);
      text-decoration-color: var(--colorGray_40)
   }
}

.crumbs-nav__link:focus,
.crumbs-nav__link:active {
   color: var(--colorText);
   text-decoration-color: var(--colorGray_40)
}

.crumbs-nav__here,
.crumbs-nav__link {
   color: var(--colorGray_50)
}

.eshop-widget {
   position: relative;
   display: grid;
   margin-top: 11px;
   padding: 24px 24px 22px;
   row-gap: 12px;
   border: 1px solid var(--colorAccent);
   border-radius: 23px 0;
   box-shadow: inset 0 0 20px 3px var(--colorAccent_Dark)
}

.eshop-widget:before,
.eshop-widget:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 30px;
   height: 30px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.eshop-widget:before {
   top: -15px;
   left: -15px;
   border-right: 1px solid var(--colorAccent)
}

.eshop-widget:after {
   right: -15px;
   bottom: -15px;
   border-left: 1px solid var(--colorAccent)
}

.eshop-widget__logo {
   display: flex;
   aspect-ratio: 370/327;
   margin-bottom: 8px;
   background-color: var(--colorGray_02)
}

.eshop-widget__logo img {
   width: 100%;
   object-fit: cover
}

.eshop-widget__price {
   display: flex;
   flex-direction: column;
   font-size: var(--fontSize_H3);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorWhite)
}

.eshop-widget__price span {
   order: 2;
   color: var(--colorAccent);
   text-transform: uppercase;
   font-size: var(--fontSize_Hint)
}

.eshop-widget__list {
   position: relative;
   display: grid;
   padding-top: 12px;
   row-gap: 20px;
   border-top: 1px dashed var(--colorGray_05)
}

@media (min-width: 760px) {
   .eshop-widget__list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--gapsCol_Base)
   }
}

@media (min-width: 1000px) {
   .eshop-widget__list {
      grid-template-columns: none
   }
}

.eshop-widget__item {
   position: relative;
   display: flex;
   flex-direction: column;
   row-gap: 4px;
   font-size: var(--fontSize_Hint)
}

.eshop-widget__name {
   text-transform: uppercase
}

.eshop-widget__value {
   padding-left: 20px;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorWhite)
}

.eshop-widget__value:before {
   content: "";
   position: absolute;
   top: 27px;
   left: 1px;
   width: 5px;
   height: 9px;
   border-left: 1px solid var(--colorAccent);
   border-bottom: 1px solid var(--colorAccent)
}

.eshop-widget__value a {
   display: flex;
   padding: 10px 8px 12px 1.35em;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Hint);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .eshop-widget__value a:hover {
      color: var(--colorInvert)
   }
}

.eshop-widget__value a:focus,
.eshop-widget__value a:active {
   color: var(--colorInvert)
}

.global-nav {
   position: relative;
   display: flex;
   align-items: center
}

.global-nav__menu {
   display: none;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 2000;
   width: 100%;
   height: 100vh;
   animation-fill-mode: both;
   animation-timing-function: ease-out
}

@media (min-width: 1000px) {
   .global-nav__menu {
      position: relative;
      display: flex;
      max-width: none;
      height: 100%
   }
}

.global-nav__menu.is-on {
   z-index: 2030;
   display: flex;
   animation-name: onlayLayer_On;
   animation-duration: .35s
}

.global-nav__menu.is-off {
   display: flex;
   animation-name: onlayLayer_Off;
   animation-duration: .2s
}

.global-nav__main {
   overflow-x: hidden;
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   padding: 52px 20px 12vh
}

@media (min-width: 1000px) {
   .global-nav__main {
      overflow: visible;
      padding: 0;
      column-gap: 32px
   }
}

.global-nav__main .lang-toggle,
.global-nav__main .hero-order {
   position: absolute;
   top: 23px;
   left: clamp(16px, 4.175vw, 32px)
}

.global-nav__list {
   display: flex;
   flex-direction: column;
   row-gap: 16px
}

@media (min-width: 1000px) {
   .global-nav__list {
      flex-direction: row;
      margin: 0;
      column-gap: clamp(40px, 4vw, 56px)
   }
}

.global-nav__link {
   display: flex;
   align-items: center;
   height: var(--buttonSize_Base);
   margin: 0 -12px;
   padding: 0 12px;
   font-size: 17px;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   text-transform: lowercase
}

.global-nav__link:before,
.global-nav__link:after {
   display: inline-flex;
   color: var(--colorGray_20);
   transition: var(--transition_Text);
   animation: colorLoading 1s forwards;
   opacity: 0
}

.anim-hero .global-nav__link:before,
.anim-hero .global-nav__link:after {
   animation-delay: 3s
}

.global-nav__link:before {
   content: "_";
   margin: -1px 8px 0 0;
   font-weight: var(--fontWeight_Bold)
}

.global-nav__link:after {
   content: "/";
   padding-left: 3px
}

@media screen and (hover: hover) {

   .global-nav__link:hover:before,
   .global-nav__link:hover:after {
      color: var(--colorAccent);
      text-shadow: 0 0 .5rem var(--colorAccent_Glow)
   }
}

.global-nav__link:focus:before,
.global-nav__link:focus:after,
.global-nav__link:active:before,
.global-nav__link:active:after {
   color: var(--colorAccent);
   text-shadow: 0 0 .5rem var(--colorAccent_Glow)
}

@media (min-width: 1000px) {
   .global-nav__link {
      font-size: var(--fontSize_Menu)
   }
}

.global-nav__open {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 42px;
   height: 34px;
   font-size: 0;
   letter-spacing: 0;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   text-transform: lowercase;
   border: 1px solid var(--colorGray_10);
   border-radius: 4px 0;
   transition: var(--transition_Base)
}

.global-nav__open:before,
.global-nav__open:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 8px;
   height: 8px;
   color: var(--colorGray_20);
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.global-nav__open:before {
   top: -4px;
   left: -4px;
   border-right: 1px solid var(--colorGray_10)
}

.global-nav__open:after {
   right: -4px;
   bottom: -4px;
   border-left: 1px solid var(--colorGray_10)
}

@media screen and (hover: hover) {
   .global-nav__open:hover {
      box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
   }

   .global-nav__open:hover,
   .global-nav__open:hover:before,
   .global-nav__open:hover:after {
      border-color: var(--colorAccent)
   }
}

.global-nav__open:focus,
.global-nav__open:active {
   box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
}

.global-nav__open:focus,
.global-nav__open:focus:before,
.global-nav__open:focus:after,
.global-nav__open:active,
.global-nav__open:active:before,
.global-nav__open:active:after {
   border-color: var(--colorAccent)
}

@media (min-width: 480px) {
   .global-nav__open {
      align-items: center;
      width: auto;
      height: var(--buttonSize_Base);
      margin: 0 -12px;
      padding: 0 12px;
      font-size: var(--fontSize_Menu);
      border: 0
   }

   .global-nav__open:before,
   .global-nav__open:after {
      position: static;
      display: inline-flex;
      width: auto;
      height: auto;
      background: none;
      border: 0;
      transform: none;
      transition: var(--transition_Text);
      animation: colorLoading 1s forwards;
      opacity: 0
   }

   .anim-hero .global-nav__open:before,
   .anim-hero .global-nav__open:after {
      animation-delay: 3s
   }

   .global-nav__open:before {
      content: "_";
      margin: -1px 8px 0 0;
      font-weight: var(--fontWeight_Bold)
   }

   .global-nav__open:after {
      content: "/";
      padding-left: 3px
   }
}

@media screen and (min-width: 480px) and (hover: hover) {
   .global-nav__open:hover {
      box-shadow: none
   }

   .global-nav__open:hover:before,
   .global-nav__open:hover:after {
      color: var(--colorAccent);
      text-shadow: 0 0 .5rem var(--colorAccent_Glow)
   }
}

@media (min-width: 480px) {

   .global-nav__open:focus,
   .global-nav__open:active {
      box-shadow: none
   }

   .global-nav__open:focus:before,
   .global-nav__open:focus:after,
   .global-nav__open:active:before,
   .global-nav__open:active:after {
      color: var(--colorAccent);
      text-shadow: 0 0 .5rem var(--colorAccent_Glow)
   }
}

@media (min-width: 480px) {
   .global-nav__open .icon-menu {
      display: none
   }
}

@media (min-width: 1000px) {
   .global-nav__open {
      display: none
   }
}

.global-nav__close {
   position: absolute;
   top: 23px;
   right: clamp(16px, 4.175vw, 32px);
   display: flex;
   justify-content: center;
   align-items: center;
   width: 42px;
   height: 34px;
   font-size: 0;
   font-weight: var(--fontWeight_Bold);
   letter-spacing: 0;
   color: var(--colorSpec);
   text-transform: lowercase;
   border: 1px solid var(--colorGray_10);
   border-radius: 4px 0;
   transition: var(--transition_Base)
}

.global-nav__close:before,
.global-nav__close:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 8px;
   height: 8px;
   color: var(--colorGray_20);
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.global-nav__close:before {
   top: -4px;
   left: -4px;
   border-right: 1px solid var(--colorGray_10)
}

.global-nav__close:after {
   right: -4px;
   bottom: -4px;
   border-left: 1px solid var(--colorGray_10)
}

@media screen and (hover: hover) {
   .global-nav__close:hover {
      box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
   }

   .global-nav__close:hover,
   .global-nav__close:hover:before,
   .global-nav__close:hover:after {
      border-color: var(--colorAccent)
   }
}

.global-nav__close:focus,
.global-nav__close:active {
   box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
}

.global-nav__close:focus,
.global-nav__close:focus:before,
.global-nav__close:focus:after,
.global-nav__close:active,
.global-nav__close:active:before,
.global-nav__close:active:after {
   border-color: var(--colorAccent)
}

@media (min-width: 1000px) {
   .global-nav__close {
      display: none
   }
}

.global-nav__onlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 20;
   display: none;
   background: radial-gradient(circle at 180% 120%, rgba(113, 25, 231, .2) 0%, var(--colorBlack) 75%), var(--colorBlack);
   animation-fill-mode: both;
   animation-timing-function: ease-out
}

.global-nav__onlay.is-on {
   display: flex;
   animation-name: onlayLayer_On;
   animation-duration: .35s
}

.global-nav__onlay.is-off {
   display: flex;
   animation-name: onlayLayer_Off;
   animation-duration: .2s
}

@media screen and (hover: hover) {

   .global-nav__link.mod-work:hover:before,
   .global-nav__link.mod-work:hover:after {
      color: var(--colorProjects);
      text-shadow: 0 0 .5rem var(--colorProjects_Glow)
   }
}

.global-nav__link.mod-work:focus:before,
.global-nav__link.mod-work:focus:after,
.global-nav__link.mod-work:active:before,
.global-nav__link.mod-work:active:after {
   color: var(--colorProjects);
   text-shadow: 0 0 .5rem var(--colorProjects_Glow)
}

@media screen and (hover: hover) {

   .global-nav__link.mod-notes:hover:before,
   .global-nav__link.mod-notes:hover:after {
      color: var(--colorNotes);
      text-shadow: 0 0 .5rem var(--colorNotes_Glow)
   }
}

.global-nav__link.mod-notes:focus:before,
.global-nav__link.mod-notes:focus:after,
.global-nav__link.mod-notes:active:before,
.global-nav__link.mod-notes:active:after {
   color: var(--colorNotes);
   text-shadow: 0 0 .5rem var(--colorNotes_Glow)
}

@media screen and (hover: hover) {

   .global-nav__link.mod-more:hover:before,
   .global-nav__link.mod-more:hover:after {
      color: var(--colorInvert);
      text-shadow: 0 0 .5rem var(--colorInvert_Glow)
   }
}

.global-nav__link.mod-more:focus:before,
.global-nav__link.mod-more:focus:after,
.global-nav__link.mod-more:active:before,
.global-nav__link.mod-more:active:after {
   color: var(--colorInvert);
   text-shadow: 0 0 .5rem var(--colorInvert_Glow)
}

.hero-block {
   position: relative;
   align-items: center
}

.hero-block__main {
   position: relative;
   z-index: 50;
   grid-column: 1/span 4;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 64vh;
   min-height: 440px
}

@media (min-width: 480px) {
   .hero-block__main {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .hero-block__main {
      grid-column: 2/span 6;
      padding: 0
   }
}

@media (min-width: 1340px) {
   .hero-block__main {
      grid-column: 2/span 10;
      height: 680px
   }
}

.hero-block__title {
   line-height: 1.05;
   font-size: clamp(28px, 7vw, 64px);
   color: var(--colorSpec);
   text-transform: uppercase
}

@media (min-width: 760px) {
   .hero-block__title {
      text-transform: none
   }
}

.hero-block__title span {
   display: inline-flex
}

.hero-block__title span:after {
   content: "_";
   display: flex;
   margin-left: .5em;
   color: transparent;
   animation: textCaretFade 8s infinite 2.5s
}

@media (min-width: 1340px) {
   .hero-block__title span:after {
      animation-delay: 3s
   }
}

.hero-block__desc {
   max-width: 400px;
   margin-top: 20px;
   padding-left: 1.2942em;
   font-size: var(--fontSize_Spec);
   color: var(--colorGray_50);
   text-transform: uppercase
}

@media (min-width: 1000px) {
   .hero-block__desc {
      max-width: none
   }
}

.hero-block__desc:before {
   content: "└";
   margin-left: -1.2942em;
   color: var(--colorGray_10);
   animation: textColorSwitch_Accent 1s forwards 2.5s
}

@media (min-width: 1340px) {
   .hero-block__desc:before {
      animation-delay: 3s
   }
}

.hero-block__desc .cursor {
   color: var(--colorInvert)
}

.hero-block__cover {
   position: absolute;
   top: -80px;
   right: -28px;
   left: 0;
   z-index: 20;
   display: none;
   align-items: center;
   height: 840px
}

@media (min-width: 1340px) {
   .hero-block__cover {
      display: flex
   }
}

@media (min-width: 1660px) {
   .hero-block__cover {
      right: -36px
   }
}

.hero-block__logo {
   width: 840px;
   height: 680px;
   margin-top: -40px;
   transform: translate(920px);
   opacity: .65;
   animation: unrealLogo_Glow 1s forwards 4s
}

.hero-block__logo path {
   animation: unrealLogo_Stroke 1.5s forwards 3s
}

.hero-block.mod-style {
   position: static
}

.hero-block.mod-style .hero-block__title {
   text-shadow: 0 0 1em rgba(0, 0, 0, .35)
}

.hero-block.mod-style .hero-block__desc {
   color: var(--colorGray_40);
   text-shadow: 0 0 1em rgba(0, 0, 0, .35)
}

.hero-block.mod-style .hero-block__cover {
   overflow: hidden;
   position: absolute;
   top: 0;
   right: 0 !important;
   left: 0;
   z-index: -10;
   display: flex;
   height: 80vh;
   min-height: 720px;
   align-items: normal
}

.hero-block.mod-style .hero-block__cover img {
   position: relative;
   z-index: 10;
   width: 100%;
   height: 100%
}

.hero-block.mod-style .hero-block__cover:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: 20;
   height: 80vh;
   min-height: 720px;
   background: radial-gradient(75% 75% at 104% 30%, rgba(0, 0, 0, .65) 0%, transparent 100%), radial-gradient(75% 75% at 7% 83%, rgba(0, 0, 0, .85) 0%, transparent 100%), linear-gradient(180deg, var(--colorBlack) 0%, transparent 45%, rgba(0, 0, 0, .85) 80%, var(--colorBlack) 100%);
   background-size: 100% 100%;
   background-position: 0px 0px, 0px 0px, 0px 0px
}

.hero-order {
   overflow: hidden;
   display: flex;
   align-items: center
}

.hero-order__action {
   position: relative;
   display: flex;
   width: 43px;
   height: 34px;
   padding: 6px 0 0 11px;
   text-transform: lowercase;
   border: 1px solid var(--colorAccent);
   border-radius: 4px 0;
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .hero-order__action:hover {
      border-color: var(--colorInvert);
      box-shadow: inset 0 0 7px 2px var(--colorInvert_Dark)
   }

   .hero-order__action:hover span {
      background: var(--colorInvert)
   }
}

.hero-order__action:focus,
.hero-order__action:active {
   border-color: var(--colorInvert);
   box-shadow: inset 0 0 7px 2px var(--colorInvert_Dark)
}

.hero-order__action:focus span,
.hero-order__action:active span {
   background: var(--colorInvert)
}

@media (min-width: 1340px) {
   .hero-order__action {
      height: var(--buttonSize_Mini)
   }
}

.hero-order__action span {
   display: flex;
   height: 17px;
   width: 17px;
   font-size: 0;
   background: var(--colorGray_30);
   -webkit-mask-image: url(./telegram-BZzy6HDJ.svg);
   mask-image: url(./telegram-BZzy6HDJ.svg);
   -webkit-mask-size: 17px;
   mask-size: 17px;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   transition: var(--transition_Base)
}

.hero-order__action:before,
.hero-order__action:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 8px;
   height: 8px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.hero-order__action:before {
   top: -4px;
   left: -4px;
   border-right: 1px solid var(--colorAccent)
}

.hero-order__action:after {
   right: -4px;
   bottom: -4px;
   border-left: 1px solid var(--colorAccent)
}

@media screen and (hover: hover) {

   .hero-order__action:hover:before,
   .hero-order__action:hover:after {
      border-color: var(--colorInvert)
   }
}

.hero-order__action:focus:before,
.hero-order__action:focus:after,
.hero-order__action:active:before,
.hero-order__action:active:after {
   border-color: var(--colorInvert)
}

.lang-toggle {
   overflow: hidden;
   display: flex;
   align-items: center
}

.lang-toggle__action {
   position: relative;
   display: flex;
   align-items: center;
   width: 43px;
   height: 34px;
   padding: 0 10px 0 11px;
   font-size: var(--fontSize_Menu);
   font-weight: var(--fontWeight_Bold);
   color: var(--colorSpec);
   text-transform: lowercase;
   transition: var(--transition_Base);
   border: 1px solid var(--colorGray_10);
   border-radius: 4px 0
}

@media screen and (hover: hover) {
   .lang-toggle__action:hover {
      border-color: var(--colorAccent);
      box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
   }
}

.lang-toggle__action:focus,
.lang-toggle__action:active {
   border-color: var(--colorAccent);
   box-shadow: inset 0 0 7px 2px var(--colorAccent_Dark)
}

@media (min-width: 1340px) {
   .lang-toggle__action {
      height: var(--buttonSize_Mini)
   }
}

.lang-toggle__action:before,
.lang-toggle__action:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 8px;
   height: 8px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.lang-toggle__action:before {
   top: -4px;
   left: -4px;
   border-right: 1px solid var(--colorGray_10)
}

.lang-toggle__action:after {
   right: -4px;
   bottom: -4px;
   border-left: 1px solid var(--colorGray_10)
}

@media screen and (hover: hover) {

   .lang-toggle__action:hover:before,
   .lang-toggle__action:hover:after {
      border-color: var(--colorAccent)
   }
}

.lang-toggle__action:focus:before,
.lang-toggle__action:focus:after,
.lang-toggle__action:active:before,
.lang-toggle__action:active:after {
   border-color: var(--colorAccent)
}

.markers-desc {
   position: relative;
   margin-top: 1px;
   padding: 24px 24px 20px;
   background: var(--colorBlack);
   border: 1px solid var(--colorAccent);
   border-radius: 23px 0;
   box-shadow: inset 0 0 20px 3px var(--colorAccent_Dark)
}

.markers-desc:before,
.markers-desc:after {
   content: "";
   position: absolute;
   z-index: 10;
   width: 30px;
   height: 30px;
   background: var(--colorBlack);
   transform: rotate(45deg);
   transition: var(--transition_Base);
   pointer-events: none
}

.markers-desc:before {
   top: -15px;
   left: -15px;
   border-right: 1px solid var(--colorAccent)
}

.markers-desc:after {
   right: -15px;
   bottom: -15px;
   border-left: 1px solid var(--colorAccent)
}

@media (min-width: 1000px) {
   .markers-desc {
      padding: 12px 0 0;
      border: 0;
      box-shadow: none
   }

   .markers-desc:before,
   .markers-desc:after {
      display: none
   }
}

@media (min-width: 1340px) {
   .markers-desc {
      padding-right: clamp(72px, 6.83vw, 112px)
   }
}

.markers-desc__title {
   margin-bottom: 12px;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Hint);
   color: var(--colorAccent);
   text-transform: uppercase
}

.markers-desc__list {
   position: relative
}

.markers-desc__list:before {
   content: "";
   position: absolute;
   top: -1px;
   right: 0;
   left: 0;
   z-index: 10;
   height: 3px;
   background: var(--colorBlack)
}

@media (min-width: 1000px) {
   .markers-desc__list:before {
      display: none
   }
}

@media (min-width: 760px) {
   .markers-desc__list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--gapsCol_Base)
   }
}

@media (min-width: 1000px) {
   .markers-desc__list {
      grid-template-columns: none;
      border-bottom: 1px dashed var(--colorGray_05)
   }
}

.markers-desc__item {
   position: relative;
   display: flex;
   padding: 10px 8px 12px 1.35em;
   line-height: var(--lineHeight_Hx);
   font-size: var(--fontSize_Hint);
   transition: var(--transition_Base)
}

.markers-desc__item:not(:first-child) {
   border-top: 1px dashed var(--colorGray_05)
}

@media (min-width: 1000px) {
   .markers-desc__item:first-child {
      border-top: 1px dashed var(--colorGray_05)
   }
}

.markers-desc__item:before {
   content: "/";
   position: absolute;
   top: 10px;
   left: 0;
   font-size: 1em;
   color: var(--colorGray_20);
   transition: var(--transition_Base)
}

@media screen and (hover: hover) {
   .markers-desc__item:hover:before {
      color: var(--colorInvert)
   }
}

.markers-desc__item:focus:before,
.markers-desc__item:active:before {
   color: var(--colorInvert)
}

.page-lead {
   margin-bottom: var(--textMargin_Mega);
   padding-top: clamp(60px, 7.9vw, 104px)
}

.page-lead__main {
   grid-column: 1/span 4;
   display: flex;
   flex-direction: column;
   justify-content: center
}

@media (min-width: 480px) {
   .page-lead__main {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .page-lead__main {
      grid-column: 1/span 8
   }
}

@media (min-width: 1000px) {
   .page-lead__main {
      grid-column: 1/span 6;
      padding-right: 72px
   }
}

@media (min-width: 1340px) {
   .page-lead__main {
      grid-column: 4/span 6;
      padding: 0
   }
}

.page-lead__main:after {
   content: "- - -";
   display: flex;
   height: 3px;
   margin: 1.35em 0 0 -.18em;
   line-height: 3px;
   font-size: var(--fontSize_H2);
   color: var(--colorGray_10)
}

.page-lead__title {
   margin-bottom: var(--textMargin_Base);
   line-height: var(--lineHeight_H1);
   font-size: var(--fontSize_H1);
   color: var(--colorSpec);
   text-transform: capitalize
}

@media (min-width: 480px) {
   .page-lead__title:before {
      content: "/";
      margin: 0 .6em 0 -1.224em;
      color: var(--colorAccent)
   }
}

@media (min-width: 1340px) {
   .page-lead__title:before {
      color: var(--colorGray_10)
   }
}

html[lang=ru] .page-lead__title {
   text-transform: none
}

.page-lead__info {
   color: var(--colorGray_50)
}

.page-lead__info mark {
   order: -1;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorAccent)
}

.page-lead__info time {
   color: var(--colorGray_40)
}

.page-lead__intro {
   margin-top: var(--textMargin_Plus);
   color: var(--colorGray_40)
}

.page-lead__cover {
   overflow: hidden;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: -10;
   height: 80vh;
   min-height: 720px
}

.page-lead__cover img {
   position: relative;
   z-index: 10;
   width: 100%;
   height: 100%
}

.page-lead__cover:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: 20;
   height: 80vh;
   min-height: 720px;
   background: radial-gradient(75% 75% at 104% 30%, rgba(0, 0, 0, .65) 0%, transparent 100%), radial-gradient(75% 75% at 7% 83%, rgba(0, 0, 0, .85) 0%, transparent 100%), linear-gradient(180deg, var(--colorBlack) 0%, transparent 45%, rgba(0, 0, 0, .85) 80%, var(--colorBlack) 100%);
   background-size: 100% 100%;
   background-position: 0px 0px, 0px 0px, 0px 0px
}

.page-lead.mod-cover {
   padding-top: clamp(15vh, 31.5vw, 25vh)
}

@media (min-width: 1000px) {
   .page-lead.mod-video .page-lead__main {
      grid-column: 1/span 7
   }
}

@media (min-width: 1340px) {
   .page-lead.mod-video .page-lead__main {
      grid-column: 3/span 8;
      padding: 0
   }
}

.project-intro {
   margin-bottom: var(--textMargin_Mega);
   padding-top: clamp(44px, 7.9vw, 84px)
}

.project-intro.mod-cover {
   padding-top: clamp(15vh, 31.5vw, 25vh)
}

.project-intro__main {
   grid-column: 1/span 4;
   display: flex;
   flex-direction: column;
   justify-content: center
}

@media (min-width: 480px) {
   .project-intro__main {
      padding: 0 52px
   }
}

@media (min-width: 760px) {
   .project-intro__main {
      grid-column: 1/span 8
   }
}

@media (min-width: 1000px) {
   .project-intro__main {
      grid-column: 1/span 6;
      padding-right: 72px
   }
}

@media (min-width: 1340px) {
   .project-intro__main {
      grid-column: 4/span 6;
      padding: 0
   }
}

.project-intro__main:after {
   content: "- - -";
   display: flex;
   height: 3px;
   margin: 1.35em 0 0 -.18em;
   line-height: 3px;
   font-size: var(--fontSize_H2);
   color: var(--colorGray_10)
}

.project-intro__title {
   margin-bottom: var(--textMargin_Base);
   line-height: var(--lineHeight_H1);
   font-size: var(--fontSize_H1);
   color: var(--colorSpec);
   text-transform: capitalize
}

@media (min-width: 480px) {
   .project-intro__title:before {
      content: "/";
      margin: 0 .6em 0 -1.224em;
      color: var(--colorAccent)
   }
}

@media (min-width: 1340px) {
   .project-intro__title:before {
      color: var(--colorGray_10)
   }
}

.project-intro__info {
   color: var(--colorGray_50)
}

.project-intro__info time {
   color: var(--colorGray_40)
}

.project-intro__type {
   order: -1;
   font-weight: var(--fontWeight_Bold);
   color: var(--colorAccent)
}

.project-intro__intro {
   margin-top: var(--textMargin_Plus);
   color: var(--colorGray_40)
}

.project-intro__cover {
   overflow: hidden;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: -10;
   height: 80vh;
   min-height: 720px
}

.project-intro__cover:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: 20;
   height: 80vh;
   min-height: 720px;
   background: radial-gradient(75% 75% at 104% 30%, rgba(0, 0, 0, .65) 0%, transparent 100%), radial-gradient(75% 75% at 7% 83%, rgba(0, 0, 0, .85) 0%, transparent 100%), linear-gradient(180deg, var(--colorBlack) 0%, transparent 45%, rgba(0, 0, 0, .85) 80%, var(--colorBlack) 100%);
   background-size: 100% 100%;
   background-position: 0px 0px, 0px 0px, 0px 0px
}

.project-intro__cover img {
   position: relative;
   z-index: 10;
   width: 100%;
   height: 100%
}

@media (min-width: 1340px) {
   .tech-specs {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 64px;
      padding-right: 64px
   }

   .tech-specs .header {
      grid-column: span 2
   }
}

.tech-specs__item {
   display: flex;
   justify-content: space-between;
   padding: 11px 0;
   column-gap: 12px;
   border-bottom: 1px dashed var(--colorGray_05)
}

.tech-specs__name {
   flex-shrink: 0;
   min-width: 180px
}

.tech-specs__data {
   text-align: right;
   color: var(--colorWhite)
}

.tech-specs__data a {
   margin: -4px 0;
   padding: 4px 0;
   color: var(--colorAccent);
   text-decoration: underline;
   transition: color .2s ease
}

@media screen and (hover: hover) {
   .tech-specs__data a:hover {
      color: var(--colorInvert)
   }
}

.tech-specs__data a:focus,
.tech-specs__data a:active {
   color: var(--colorInvert)
}

.hystmodal {
   z-index: 1000 !important
}

.hystmodal:before {
   background: var(--colorOnlay);
   opacity: 1;
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px)
}