:root {
  --cehat_clacou: #08090f;
  --tan_doclo: #10121d;
  --fur: #171a29;
  --diclol-kadror: #22273b;
  --toufir_braigo: #d7dbe8;
  --bo: #9ba2b9;
  --trunur: #757b95;
  --praprot: #40d4b9;
  --droux: #6e82ff;
  --fron_stafrai: 14px;
  --gam: "Avenir Next","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

a {
  color: inherit;
}

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

body.seho-nout {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cehat_clacou);
  color: var(--toufir_braigo);
  font: 400 1rem/1.6 var(--gam);
  overflow-wrap: break-word;
}

.mu {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.sum-skoum {
  flex: 1;
  padding-block: 1.5rem 3rem;
}

.ki {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(8,9,15,.92);
  border-bottom: 1px solid var(--diclol-kadror);
}

.moulut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.5rem;
  padding-block: .7rem;
}

.naisous-bres {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #f9f9f9;
}

.naisous-bres img {
  flex: none;
}

.fam-valat {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-inline-start: auto;
}

.fam-valat a {
  padding: .35rem .85rem;
  border-radius: 99px;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--bo);
}

.fam-valat a:hover {
  background: var(--fur);
  color: #f9f9f9;
}

.fam-valat a[aria-current] {
  background: var(--praprot);
  color: #031e1a;
}

.col-treclar {
  background: var(--tan_doclo);
  border: 1px solid var(--diclol-kadror);
  border-radius: var(--fron_stafrai);
}

.fraimo-ko {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  margin-bottom: .45rem;
  padding: .12rem .55rem;
  border-radius: 99px;
  background: rgba(64,212,185,.13);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--praprot);
}

.volu {
  display: inline-block;
  padding: .35rem .9rem;
  border: 1px solid var(--diclol-kadror);
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--toufir_braigo);
  white-space: normal;
}

.volu:hover {
  border-color: var(--praprot);
  color: var(--praprot);
}

.doun-ber {
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
}

.doun-ber h1 {
  margin: 0;
  font-size: clamp(1.5rem,3.4vw,2.2rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: #f9f9f9;
}

.doun-ber .cor {
  margin-top: .8rem;
}

.skoula-stapa {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 1.5rem;
  align-items: start;
}

.clet-vo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cous-vain {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
  grid-template-rows: auto auto;
  gap: 1rem;
}

.ren {
  grid-row: 1/3;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 24rem;
  overflow: hidden;
  border-radius: var(--fron_stafrai);
  background: linear-gradient(140deg,#182e43,#11162b 55%,#1f1d43);
  border: 1px solid var(--diclol-kadror);
}

.ren:not(.bruskex-moupla) {
  min-height: 16rem;
}

.ren>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bruskex-moupla::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,rgba(4,4,7,.96) 8%,rgba(4,4,7,.55) 55%,rgba(4,4,7,.1));
}

.pli-plainer {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
}

.ren h2 {
  margin: 0 0 .6rem;
  font-size: clamp(1.5rem,3vw,2.3rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #f9f9f9;
}

.ren h2 a {
  text-decoration: none;
}

.ren h2 a:hover {
  color: var(--praprot);
}

.ren p {
  margin: 0 0 .6rem;
  color: #c7cbde;
}

.ren time {
  font-size: .8rem;
  color: var(--bo);
}

.tagat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--tan_doclo);
  border: 1px solid var(--diclol-kadror);
  border-radius: var(--fron_stafrai);
  transition: border-color .15s;
}

.tagat:hover {
  border-color: #353b5a;
}

.cerex img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--fur);
}

.po-stail {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 1rem 1.1rem 1.1rem;
}

.naim {
  border-top: 3px solid var(--droux);
}

.tagat h3 {
  margin: 0 0 .45rem;
  font-size: 1.06rem;
  line-height: 1.3;
  font-weight: 700;
  color: #f9f9f9;
}

.tagat h3 a {
  text-decoration: none;
}

.tagat h3 a:hover {
  color: var(--praprot);
}

.tagat p {
  margin: 0 0 .6rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--bo);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tagat time {
  margin-top: auto;
  font-size: .76rem;
  color: var(--trunur);
}

.cous-vain .cerex img {
  aspect-ratio: 21/9;
}

.pleci {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: .9rem;
}

.pleci h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  color: #f9f9f9;
}

.pleci h2::before {
  content: "";
  flex: none;
  width: .55rem;
  height: 1.3rem;
  border-radius: 3px;
  background: var(--praprot);
}

.max-gla {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1rem;
}

.las-clou {
  grid-template-columns: repeat(auto-fill,minmax(min(100%,17rem),1fr));
}

.haihol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ve-froske {
  position: sticky;
  top: 5rem;
}

.tainoun {
  padding: 1.1rem 1.2rem;
  background: var(--tan_doclo);
  border: 1px solid var(--diclol-kadror);
  border-radius: var(--fron_stafrai);
}

.tainoun h2 {
  margin: 0 0 .7rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--trunur);
}

.rem-stai {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wfd-n;
}

.rem-stai li {
  counter-increment: wfd-n;
  position: relative;
  padding-block: .6rem;
  padding-inline-start: 2rem;
  border-top: 1px solid var(--diclol-kadror);
}

.rem-stai li:first-child {
  border-top: 0;
  padding-top: 0;
}

.rem-stai li::before {
  content: counter(wfd-n,decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  font-size: .8rem;
  font-weight: 800;
  color: var(--praprot);
}

.rem-stai a {
  display: block;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  color: var(--toufir_braigo);
}

.rem-stai a:hover {
  color: var(--praprot);
}

.rem-stai time {
  font-size: .74rem;
  color: var(--trunur);
}

.no {
  margin: 0;
  padding: 0;
  list-style: none;
}

.no li {
  padding-block: .4rem;
  border-top: 1px solid var(--diclol-kadror);
}

.no li:first-child {
  border-top: 0;
}

.no a {
  font-size: .92rem;
  color: var(--droux);
  text-decoration: none;
}

.no a:hover {
  text-decoration: underline;
}

.kol-kes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kol-kes a {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: 99px;
  background: var(--fur);
  font-size: .85rem;
  text-decoration: none;
  color: var(--toufir_braigo);
}

.kol-kes a:hover {
  background: #212743;
  color: #f9f9f9;
}

.kol-kes b {
  margin-inline-start: .3rem;
  font-size: .75rem;
  color: var(--praprot);
}

.drai a {
  padding: .5rem 1rem;
  font-size: 1rem;
}

.bai {
  padding: 1.6rem;
  margin-bottom: 1.4rem;
  background: linear-gradient(120deg,#111b32,var(--tan_doclo) 60%);
}

.bai h1 {
  margin: 0;
  font-size: clamp(1.8rem,4.6vw,2.8rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #f9f9f9;
}

.bai p {
  max-width: 48rem;
  margin: .6rem 0 0;
  color: var(--bo);
}

.ske {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-top: 2rem;
}

.ske a,.ske span {
  min-width: 2.5rem;
  padding: .45rem .75rem;
  border-radius: 10px;
  background: var(--tan_doclo);
  border: 1px solid var(--diclol-kadror);
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  color: var(--toufir_braigo);
}

.ske a:hover {
  border-color: var(--praprot);
}

.ske [aria-current] {
  background: var(--praprot);
  border-color: var(--praprot);
  color: #031e1a;
}

[dir=rtl] .trezus {
  transform: scaleX(-1);
}

.trozar-pat {
  min-width: 0;
  padding: 1.8rem 2rem 2rem;
}

.skeprer {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1rem;
  font-size: .82rem;
  color: var(--trunur);
}

.skeprer a {
  text-decoration: none;
}

.skeprer a:hover,.skeprer a:last-child {
  color: var(--praprot);
}

.trozar-pat h1 {
  margin: 0 0 .8rem;
  font-size: clamp(1.8rem,4.4vw,2.8rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: #f9f9f9;
}

.plabri-plaiclin {
  margin: 0 0 1.2rem;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--bo);
}

.sam-tega {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.4rem;
  padding: .8rem 1rem;
  border-radius: 12px;
  background: var(--fur);
}

.vozun {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--praprot),var(--droux));
  font-weight: 800;
  text-transform: uppercase;
  color: #070a17;
}

.sam-tega>div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.sam-tega b {
  color: #f9f9f9;
}

.sam-tega time {
  font-size: .82rem;
  color: var(--trunur);
}

.fror-dait {
  margin: 0 0 1.6rem;
}

.fror-dait img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 12px;
  background: var(--fur);
}

.pregoun-glistem {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--diclol-kadror);
}

.haix-ca {
  font-size: .88rem;
}

.haix-ca ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.haix-ca ul ul {
  padding-inline-start: .9rem;
}

.haix-ca li {
  margin: 0;
}

.haix-ca a {
  display: block;
  padding: .3rem 0;
  padding-inline-start: .7rem;
  border-inline-start: 2px solid var(--diclol-kadror);
  text-decoration: none;
  color: var(--bo);
}

.haix-ca a:hover {
  border-color: var(--praprot);
  color: #f9f9f9;
}

.frouba {
  margin: 0;
  padding: 0;
  list-style: none;
}

.frouba li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding-block: .6rem;
  border-top: 1px solid var(--diclol-kadror);
}

.frouba li:first-child {
  border-top: 0;
  padding-top: 0;
}

.frouba img {
  flex: none;
  width: 4.2rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 8px;
  background: var(--fur);
}

.frouba a {
  min-width: 0;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  color: var(--toufir_braigo);
}

.frouba a:hover {
  color: var(--praprot);
}

.cor {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--toufir_braigo);
}

.cor h2 {
  margin: 2.2rem 0 .7rem;
  font-size: 1.55rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #f9f9f9;
  scroll-margin-top: 5rem;
}

.cor h3 {
  margin: 1.7rem 0 .5rem;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--praprot);
  scroll-margin-top: 5rem;
}

.cor a {
  color: var(--droux);
  overflow-wrap: anywhere;
}

.cor ul,.cor ol {
  padding-inline-start: 1.4rem;
}

.cor li {
  margin-bottom: .35rem;
}

.cor li::marker {
  color: var(--praprot);
}

.cor blockquote {
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  background: var(--fur);
  border-inline-start: 4px solid var(--praprot);
  color: #f9f9f9;
}

.cor blockquote p {
  margin: 0;
}

.cor table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .9rem;
}

.cor th {
  padding: .55rem .8rem;
  background: var(--fur);
  text-align: start;
  color: #f9f9f9;
}

.cor td {
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--diclol-kadror);
}

.cor pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 1rem;
  border-radius: 10px;
  background: #06070b;
  border: 1px solid var(--diclol-kadror);
  font-size: .86rem;
}

.cor code {
  padding: .1em .35em;
  border-radius: 5px;
  background: var(--fur);
  font-size: .88em;
  overflow-wrap: anywhere;
}

.cor pre code {
  padding: 0;
  background: none;
  overflow-wrap: normal;
}

.cor img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.cor hr {
  border: 0;
  border-top: 1px solid var(--diclol-kadror);
  margin: 2rem 0;
}

.mamor-glafo {
  max-width: 50rem;
  margin-inline: auto;
  padding: 1.8rem 2rem;
}

.mamor-glafo h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem,4.4vw,2.6rem);
  line-height: 1.15;
  color: #f9f9f9;
}

.rer {
  max-width: 36rem;
  margin: 2rem auto;
  padding: 2.4rem 2rem;
  text-align: center;
}

.bran-paiset {
  margin: 0;
  font-size: clamp(4rem,14vw,7rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg,var(--praprot),var(--droux));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rer h1 {
  margin: .4rem 0;
  color: #f9f9f9;
}

.rer>p:not([class]) {
  color: var(--bo);
}

.kai-sal {
  border-top: 1px solid var(--diclol-kadror);
  background: #05060a;
  color: var(--bo);
  font-size: .9rem;
}

.dit-hovil {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.8rem;
}

.dit-hovil section {
  max-width: 36rem;
}

.dit-hovil p {
  margin: 0;
}

.fix-hupom {
  margin-bottom: .3rem!important;
  font-size: 1.1rem;
  font-weight: 800;
  color: #f9f9f9;
}

.vepre-clinel {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vepre-clinel a {
  display: inline-block;
  padding: .3rem .8rem;
  border: 1px solid var(--diclol-kadror);
  border-radius: 99px;
  text-decoration: none;
  color: var(--toufir_braigo);
}

.vepre-clinel a:hover {
  border-color: var(--praprot);
  color: var(--praprot);
}

@media (max-width:1020px) {
  .skoula-stapa {
    grid-template-columns: minmax(0,1fr);
  }

  .ve-froske {
    position: static;
  }

  .max-gla {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

}

@media (max-width:680px) {
  .mu {
    padding-inline: 1rem;
  }

  .ki {
    position: static;
  }

  .fam-valat {
    margin-inline-start: 0;
  }

  .cous-vain {
    grid-template-columns: minmax(0,1fr);
  }

  .ren {
    grid-row: auto;
    min-height: 18rem;
  }

  .max-gla {
    grid-template-columns: minmax(0,1fr);
  }

  .trozar-pat,.mamor-glafo {
    padding: 1.2rem 1rem 1.4rem;
  }

  .doun-ber {
    padding: 1.1rem 1rem;
  }

}