.EDmBpCvG {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  min-height: 100vh;
}
  .V6GVxVqf {
    display: flex;
    flex-direction: column;
    gap: 26px;

    width: 100%;
    max-width: 900px;

    padding: 22px 12px 36px;
  }
.iJaEzOZj {
  position: fixed;
  bottom: 20px;
  right: 20px;

  background-color: var(--error-bg);
  color: var(--text-primary);

  padding: 15px 20px;

  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  z-index: 1000;

  max-width: 350px;
  
  animation: nhdtc3S3 0.3s ease-out, PGrBADya 0.5s ease-in 4.5s forwards;
}

/* Анимации */
@keyframes nhdtc3S3 {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes PGrBADya {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}
.FQdD_DPa {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
  .dPONHGp5 {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 160px;

    color: hsl(0, 0%, 48%);
    
    font-size: 0.8rem;
  }
    .dPONHGp5 input, .dPONHGp5 select {
      width: 100%;
      height: 30px;
      
      padding: 2px 7px;

      color: var(--text-primary);

      background: hsl(0, 0%, 5%);

      border: 1px solid hsl(0, 0%, 25%);
      border-radius: 2px;
      outline: none;
    }
    .dPONHGp5 select {
      cursor: pointer;
    }
    .dPONHGp5 input::placeholder {
      color: hsl(0, 0%, 45%);
    }
    .dPONHGp5 input:focus, .dPONHGp5 select:focus {
      border-color: hsl(0, 0%, 50%);
    }
.xz9qWkA_ {
  position: fixed;
  z-index: 2;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5); /* Затемнение */

  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}
  .JLb6RxPl {
    margin-top: -10%;

    background-color: hsl(0, 0%, 5%);
    border: 1px hsl(0, 0%, 20%) solid;
    border-radius: 3px;

    width: 400px;
    max-width: 90%;

    min-height: 10%;

    padding: 5px;
  }
    .GEf4pcXY {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
    }
      .pj_r8oLw {
        font-size: 1rem;
        grid-column: 2;
        margin: auto;

        cursor: default;
      }
      .WS3BaOTq {
        grid-column: 3;
        margin-left: auto;
        user-select: none;
        cursor: pointer;
      }
    .Ng1n6kUP {
      display: flex;
      justify-content: center;
      flex-direction: column;

      gap: 8px;

      padding: 8px 20px 8px 20px;
    }
.q08Yef3f {
  position: relative;
  width: 100%;
}
  .usr2hzmO {
    width: 100%;
    outline: none;
    background: transparent;

    border: 1px hsl(0, 0%, 40%) solid;
    border-radius: 5px;

    height: 2.2rem;

    padding: 0.2rem 0.4rem 0.2rem 0.4rem;
    color: white;

    transition: 0.04s ease-in;
  }
    .usr2hzmO:focus, .usr2hzmO:hover {
      border: 1px var(--text-secondary) solid;
      transition: 0.07s ease-out;
    }
    .usr2hzmO:focus + .xdKGCi3E, .usr2hzmO:hover + .xdKGCi3E {
      color: var(--text-secondary);
      transition: 0.07s ease-out;
    }
  .xdKGCi3E {
    position: absolute;
    top: -0.5rem;
    left: 1rem;

    font-size: 0.75rem;

    color: hsl(0, 0%, 40%);
    background: hsl(0, 0%, 5%);

    padding: 0 5px 0px 5px;
    margin: 0px;

    transition: 0.04s ease-in;
  }
    
.tZTTKOQu {
  background-color: hsl(0, 0%, 20%);

  border-radius: 3px;
  padding: 1px 10px 1px 10px;

  font-size: 0.95rem;

  text-align: center;
  transition: 0.04s ease-in;

  cursor: pointer;
}
  .tZTTKOQu:hover {
    background-color: hsl(0, 0%, 40%);
    transition: 0.07s ease-out;
  }
.nUIFF93I {
  position: relative;
  width: 100%;
}

.tW6rETvR {
  width: 100%;
  min-height: 90px;
  padding: 7px;
  resize: vertical;
  color: var(--text-primary);
  font: inherit;
  background: transparent;
  border: 1px solid hsl(0, 0%, 40%);
  border-radius: 5px;
  outline: none;
  transition: border-color 0.07s ease-out;
}

.tW6rETvR:focus,
.tW6rETvR:hover {
  border-color: var(--text-secondary);
}

.tW6rETvR:focus + .jy5LN_XF,
.tW6rETvR:hover + .jy5LN_XF {
  color: var(--text-secondary);
}

.jy5LN_XF {
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  padding: 0 5px;
  color: hsl(0, 0%, 40%);
  font-size: 0.75rem;
  background: hsl(0, 0%, 5%);
  transition: color 0.07s ease-out;
}

._dguzZrP {
  margin: 4px 0;
  border-radius: 4px;
  
  color: var(--text-secondary);

  font-size: 0.9rem;
}
.vlHOsECl {
  padding: 1px 2px;

  font-size: 1.2rem;
  color: hsl(0, 0%, 40%);

  background: transparent;

  border: none;

  cursor: pointer;
  transition: color 0.2s ease-out, border-color 0.2s ease-out;
}

  .vlHOsECl:hover {
    color: hsl(0, 0%, 90%);
    border-color: hsl(0, 0%, 60%);
  }
._2QrbUtkq {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 4px;

  min-width: 100%;
  min-height: 50px;
  padding: 10px;

  color: var(--text-secondary);

  background: transparent;
  
  border: 1px solid hsl(0, 0%, 28%);
  border-radius: 4px;

  cursor: pointer;
  transition: border-color 0.07s ease-out, background-color 0.07s ease-out;
}
  ._2QrbUtkq:hover {
    background: hsl(0, 0%, 12%);
    border-color: hsl(0, 0%, 42%);
  }
  .MhWWPVfz {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text-primary);
  }
  .gbfhV_d8 {
    display: flex;
    margin-top: auto;

    color: hsl(0, 0%, 45%);
    font-size: 0.85rem;
  }

.YEgtrt14 {
  width: 100%;
}
  .ysQwjGeP {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 12px;
    padding-bottom: 6px;

    border-bottom: 1px solid hsl(0, 0%, 20%);
  }
    .edUubZqe {
      font-size: 1rem;
      font-weight: 400;
    }
  .QsC6hEPv {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 8px;
  }
    .zTLkvXms {
      color: var(--text-secondary);
      padding: 14px 0;
      text-align: center;
    }

.BJhbxG6U {
  padding: 1px 2px;

  font-size: 1.2rem;
  color: hsl(0, 0%, 40%);

  background: transparent;
  
  border: none;
  
  cursor: pointer;
  transition: color 0.2s ease-out, border-color 0.2s ease-out;
}
  .BJhbxG6U:hover {
    color: hsl(0, 0%, 90%);
  }

.b1_TLYzA {
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 8px 10px;
  
  color: var(--text-secondary);
  background: hsl(0, 0%, 5%);
  
  border: 1px solid hsl(0, 0%, 25%);
  border-radius: 4px;
}
  .BRKoydSq {
    color: var(--text-primary);
  }
  .yXzlLrHe {
    display: flex;
    gap: 5px;
  }
    .yXzlLrHe button {
      padding: 3px 7px;

      color: var(--text-secondary);
      font-size: 0.8rem;

      background: hsl(0, 0%, 11%);

      border: 1px solid hsl(0, 0%, 28%);
      border-radius: 3px;
      
      cursor: pointer;
      transition: 0.07s ease-out;
    }

      .yXzlLrHe button:hover {
        color: var(--text-primary);
        background: hsl(0, 0%, 18%);
      }

.IfqXaJ0D {
  width: 100%;
}

  .nQ8CdoWg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid hsl(0, 0%, 20%);
  }

    .n4OykN_R {
      font-size: 1rem;
      font-weight: 400;
    }

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

    .Y8OVLkG1 {
      color: var(--text-secondary);
      padding: 14px 0;
      text-align: center;
    }
.BRuk8Zdg {
  border-bottom: 1px solid hsl(0, 0%, 20%);
  width: 100%;
  padding: 2px 6px;

  display: grid;
  grid-template-columns: 1fr minmax(280px, 520px) 1fr;
  align-items: center;
  gap: 16px;
}
  .FnAjwMRx {
    justify-self: start;
    cursor: pointer;
  }
  .tlAVdIId {
    display: flex;
    justify-self: end;
    flex-direction: row;
    gap: 10px;
    justify-content: space-evenly;
  }
    .pfB4qqXy {
      color: hsl(0, 0%, 40%);
      cursor: pointer;
      transition: background-color 0.2s ease-out;
    }
      .pfB4qqXy:hover {
        color: hsl(0, 0%, 90%);
        transition: background-color 0.2s ease-out;
      }

@media (max-width: 640px) {
  .BRuk8Zdg {
    grid-template-columns: 1fr auto;
    gap: 3px 12px;
    padding-bottom: 3px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: var(--text-primary);
  line-height: 1.6;
  
  background: var(--bg-primary);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  min-height: 100vh;
}
:root {
  --bg-primary: #000;

  --text-primary: #ebebeb;
  --text-secondary: #bfbfbf;

  --error-bg: #b9454e;
  
  --editor-border: oklch(50% 0 0);

  font-size: 15px;
}

/*# sourceMappingURL=main.6d809587.css.map*/