:root{color:#12151a;font-synthesis:none;text-rendering:optimizelegibility;background:#f8f8f6;font-family:IBM Plex Sans,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0}cocode-head,cocode-foot{--cocode-max:1120px;--cocode-gutter:16px}[dir=rtl] body,[dir=rtl] button,[dir=rtl] input{font-family:Vazirmatn,IBM Plex Sans,ui-sans-serif,system-ui,sans-serif}[dir=rtl] h1,[dir=rtl] h2{letter-spacing:normal;font-family:Vazirmatn,IBM Plex Sans,sans-serif}

@layer priority1 {
  :root, .xm7a3d4 {
    --x583krf: #f8f8f6;
    --x1fx51l9: #fff;
    --xidis9v: #12151a;
    --xddz72m: #4a4f4c;
    --x1vi9ps1: #6b6f6a;
    --xohvs1q: #dfe0dc;
    --x19jp0jf: #c9cbc7;
    --x1biudzz: #1f4bff;
  }
}

@layer priority2 {
  .x1ghz6dp {
    margin: 0;
  }

  .x1p3i4rr {
    padding: 0 10px;
  }

  .x84vhe8 {
    padding: 0 12px;
  }

  .xst3r74 {
    padding: 0 6px;
  }

  .x1717udv {
    padding: 0;
  }

  .x6yrr3s {
    padding: 10px 12px;
  }

  .x1we3hji {
    padding: 14px 16px 0;
  }

  .xq7kgxo {
    padding: 14px 16px 20px;
  }

  .x1tamke2 {
    padding: 16px;
  }

  .xzhq507 {
    padding: 20px 16px 8px;
  }

  .x1rm6eb0 {
    padding: 22px 16px 18px;
  }
}

@layer priority3 {
  .xvd38ch {
    border-color: var(--x19jp0jf);
  }

  .xz0k74u {
    border-color: var(--x1biudzz);
  }

  .x1cq00fn {
    border-color: var(--xidis9v);
  }

  .x1tweeo8 {
    border-color: var(--xohvs1q);
  }

  .x2u8bby {
    border-radius: 0;
  }

  .x1y0btm7 {
    border-style: solid;
  }

  .xc342km {
    border-width: 0;
  }

  .xmkeg23 {
    border-width: 1px;
  }

  .xxhr3t {
    gap: 0;
  }

  .x883omv {
    gap: 10px;
  }

  .x1v2ro7d {
    gap: 12px;
  }

  .xou54vl {
    gap: 16px;
  }

  .xaobbuh {
    gap: 18px;
  }

  .x12mrbbr {
    gap: 1px;
  }

  .x195vfkc {
    gap: 2px;
  }

  .x1ed6fcf {
    gap: 3px;
  }

  .x1nejdyq {
    gap: 5px;
  }

  .x17d4w8g {
    gap: 6px;
  }

  .x1j9xkj6 {
    gap: 7px;
  }

  .xfe5i6u {
    gap: 8px 18px;
  }

  .x167g77z {
    gap: 8px;
  }

  .xmmi0ta {
    gap: 9px;
  }

  .xe8uvvx {
    list-style: none;
  }

  .xb3r6kr {
    overflow: hidden;
  }

  .x1xpbz2h:hover {
    border-color: var(--x1biudzz);
  }

  .xje7cad:hover {
    border-color: var(--xidis9v);
  }

  .x8yjnc1:focus {
    border-color: var(--x1biudzz);
  }

  .x1uvtmcs:focus {
    outline: none;
  }

  @media (width >= 900px) {
    .x11iz27x.x11iz27x {
      gap: 0;
    }
  }
}

@layer priority4 {
  .x1pha0wt {
    align-items: baseline;
  }

  .x6s0dn4 {
    align-items: center;
  }

  .x1y5e3q9 {
    aspect-ratio: 1;
  }

  .x1s83k8l {
    background-color: #e4e5e2;
  }

  .xjbqb8w {
    background-color: #0000;
  }

  .x1tfi9ec {
    background-color: var(--x1biudzz);
  }

  .x1nhaxbo {
    background-color: var(--x1fx51l9);
  }

  .x13lgx3i {
    background-color: var(--x583krf);
  }

  .xtytcfc {
    background-color: var(--xidis9v);
  }

  .x1ix4sa6 {
    box-shadow: inset 0 0 0 1px #1f4bff;
  }

  .x1hyvwdk {
    clip-path: inset(50%);
  }

  .xeh89do {
    clip: rect(0 0 0 0);
  }

  .xecx91h {
    color: #b3261e;
  }

  .x1l0ivf {
    color: var(--x1biudzz);
  }

  .x5ih2ij {
    color: var(--x1vi9ps1);
  }

  .x1xinet3 {
    color: var(--x583krf);
  }

  .x1cgqxli {
    color: var(--xddz72m);
  }

  .x1o7vbrx {
    color: var(--xidis9v);
  }

  .x1ypdohk {
    cursor: pointer;
  }

  .x1lliihq {
    display: block;
  }

  .x78zum5 {
    display: flex;
  }

  .xrvj5dj {
    display: grid;
  }

  .x3nfvp2 {
    display: inline-flex;
  }

  .xdt5ytf {
    flex-direction: column;
  }

  .x1iyjqo2 {
    flex-grow: 1;
  }

  .x1a02dak {
    flex-wrap: wrap;
  }

  .x4uy6ih {
    font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .xngnso2 {
    font-size: 1.5rem;
  }

  .x1k6wstc {
    font-size: 10px;
  }

  .x1qt5hsa {
    font-size: 11.5px;
  }

  .x1j6dyjg {
    font-size: 11px;
  }

  .x1ct8sxb {
    font-size: 12.5px;
  }

  .xfifm61 {
    font-size: 12px;
  }

  .x2ouz8m {
    font-size: 13.5px;
  }

  .x4z9k3i {
    font-size: 13px;
  }

  .xif65rj {
    font-size: 14px;
  }

  .x1jvydc1 {
    font-size: 15px;
  }

  .x19d36u7 {
    font-size: 17px;
  }

  .xvwhms9 {
    font-size: 9px;
  }

  .x1f4kc54 {
    font-size: clamp(1.05rem, 3vw, 1.3rem);
  }

  .x10wme65 {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
  }

  .xes35ye {
    font-size: clamp(2.1rem, 9vw, 3rem);
  }

  .xk50ysn {
    font-weight: 500;
  }

  .xiqf31s {
    grid-auto-rows: 1fr;
  }

  .x1o61qjw {
    grid-template-columns: 1fr 1fr;
  }

  .x1oz7if8 {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .x19eehl1 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .xg9ou9i {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  }

  .xl56j7k {
    justify-content: center;
  }

  .x1qughib {
    justify-content: space-between;
  }

  .xjat59b {
    letter-spacing: -.01em;
  }

  .x72az59 {
    letter-spacing: -.02em;
  }

  .x9pfba7 {
    letter-spacing: .08em;
  }

  .x7447wj {
    letter-spacing: .12em;
  }

  .x1dor1uw {
    letter-spacing: .1em;
  }

  .xfrs9s4 {
    line-height: 1.45;
  }

  .x1evy7pa {
    line-height: 1.5;
  }

  .x1jjo3f5 {
    line-height: 1.55;
  }

  .x1dbl2gt {
    line-height: 1.6;
  }

  .x11m8ghp {
    line-height: 1.65;
  }

  .xa7kkou {
    line-height: 1.7;
  }

  .xo5v014 {
    line-height: 1;
  }

  .x10l6tqk {
    position: absolute;
  }

  .x2b8uid {
    text-align: center;
  }

  .x1yc453h {
    text-align: start;
  }

  .xtvhhri {
    text-transform: uppercase;
  }

  .xgdialr {
    transition-duration: .12s;
  }

  .xxrbq2n {
    transition-property: width;
  }

  .x9lcvmn {
    transition-timing-function: ease-out;
  }

  .xuxw1ft {
    white-space: nowrap;
  }

  .xm7xia3:hover {
    background-color: var(--x1biudzz);
  }

  .x1dy3k15:hover {
    color: var(--x1biudzz);
  }

  .xfku22o:hover {
    color: var(--x1fx51l9);
  }

  .xcnrwlo:hover {
    color: var(--xidis9v);
  }

  @media (width >= 900px) {
    .xi3e7qf.xi3e7qf {
      flex-direction: row-reverse;
    }

    .xt5vzds.xt5vzds {
      flex-shrink: 0;
    }
  }
}

@layer priority5 {
  .x1jcjfli {
    border-left-color: var(--x1biudzz);
  }

  .x19ypqd9 {
    border-left-style: solid;
  }

  .x19sr0n1 {
    border-left-width: 2px;
  }

  .x5yr21d {
    height: 100%;
  }

  .xjm9jq1 {
    height: 1px;
  }

  .x36qwtl {
    height: 2px;
  }

  .xt7dq6l {
    height: auto;
  }

  .xat24cr {
    margin-bottom: 0;
  }

  .x12nagc {
    margin-bottom: 4px;
  }

  .xu06os2 {
    margin-bottom: 5px;
  }

  .x8x9d4c {
    margin-left: auto;
  }

  .xack27t {
    margin-right: auto;
  }

  .x1anpbxc {
    margin-top: 10px;
  }

  .x14vqqas {
    margin-top: 12px;
  }

  .x1hmvnq2 {
    margin-top: 14px;
  }

  .x1sy10c2 {
    margin-top: 20px;
  }

  .xr9ek0c {
    margin-top: 2px;
  }

  .x1gslohp {
    margin-top: 4px;
  }

  .x1k70j0n {
    margin-top: 6px;
  }

  .x1xmf6yo {
    margin-top: 8px;
  }

  .x4gyc16 {
    max-width: 1120px;
  }

  .xiky8lt {
    max-width: 62ch;
  }

  .xprqm3i {
    max-width: 64ch;
  }

  .xkyadst {
    max-width: 68ch;
  }

  .xapjn7j {
    max-width: 760px;
  }

  .xg6iff7 {
    min-height: 100vh;
  }

  .x1gg8mnh {
    min-height: 44px;
  }

  .xeuugli {
    min-width: 0;
  }

  .xzjhap9 {
    padding-left: 14px;
  }

  .xyinxu5 {
    padding-top: 14px;
  }

  .xh8yej3 {
    width: 100%;
  }

  .x1i1rx1s {
    width: 1px;
  }

  @media (width >= 900px) {
    .x1voa1lk.x1voa1lk {
      width: 272px;
    }
  }
}