.c-vpn-https-sim {
  padding: 7.2rem 0;
  background: #04050b;
  color: #fff
}

.c-vpn-https-sim__header {
  max-width: 74.4rem;
  margin: 0 auto 4.8rem;
  text-align: center;
  animation: vpn-https-fade-in .3s ease-out both
}

.c-vpn-https-sim__title {
  font-weight: 600;
  font-size: 3.8rem;
  line-height: 1.16;
  color: #fff
}

.c-vpn-https-sim__intro {
  margin-top: 1.6rem;
  font-size: 1.7rem;
  line-height: 1.55;
  color: #a7a8b1
}

.c-vpn-https-sim__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  animation: vpn-https-fade-in .3s ease-out .1s both
}

.c-vpn-https-sim__panel,
.c-vpn-https-sim__terminal {
  border: 1px solid #36373d;
  border-radius: .8rem;
  background: #0b0d15;
  box-shadow: 0 1.8rem 5rem rgba(0, 0, 0, .28)
}

.c-vpn-https-sim__panel {
  padding: 2.4rem
}

.c-vpn-https-sim__controls-panel {
  display: flex;
  flex-direction: column
}

.c-vpn-https-sim__panel-title {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #36373d;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.3;
  color: #fff
}

.c-vpn-https-sim__panel-copy {
  margin-top: 1.2rem;
  font-size: 1.3rem;
  line-height: 1.5;
  color: #a7a8b1
}

.c-vpn-https-sim__form {
  display: grid;
  gap: 1.6rem;
  margin-top: 2.4rem
}

.c-vpn-https-sim__field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem
}

.c-vpn-https-sim__label {
  display: block;
  margin-bottom: .6rem;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #d8d9df
}

.c-vpn-https-sim__input {
  width: 100%;
  min-height: 4.4rem;
  padding: 0 1.2rem;
  border: 1px solid #36373d;
  border-radius: .6rem;
  background: #04050b;
  color: #fff;
  font-family: monospace;
  font-size: 1.4rem;
  line-height: 1.4
}

.c-vpn-https-sim__input:focus {
  border-color: #2ac4a2
}

.c-vpn-https-sim__security-box {
  padding: 1.6rem;
  border: 1px solid #36373d;
  border-radius: .8rem;
  background: #04050b
}

.c-vpn-https-sim__security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem
}

.c-vpn-https-sim__security-label {
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #d8d9df
}

.c-vpn-https-sim__toggle {
  flex: 0 0 auto
}

.c-vpn-https-sim__toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.c-vpn-https-sim__toggle-label {
  display: block;
  width: 5.2rem;
  height: 2.8rem;
  border-radius: 999px;
  background: #863534;
  cursor: pointer;
  transition: background-color .3s ease
}

.c-vpn-https-sim__toggle-label:before {
  content: "";
  position: absolute;
  top: .4rem;
  left: .4rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #fff;
  transition: transform .3s ease
}

.c-vpn-https-sim__toggle-input:checked+.c-vpn-https-sim__toggle-label {
  background: #2ac4a2
}

.c-vpn-https-sim__toggle-input:checked+.c-vpn-https-sim__toggle-label:before {
  transform: translateX(2.4rem)
}

.c-vpn-https-sim__badge {
  display: inline-block;
  margin-top: 1.2rem;
  padding: .6rem .8rem;
  border: 1px solid;
  border-radius: .6rem;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
  text-transform: uppercase
}

.c-vpn-https-sim__badge--danger {
  border-color: #b64b4a;
  background: rgba(182, 75, 74, .16);
  color: #ffb4b4
}

.c-vpn-https-sim__badge--secure {
  border-color: #2ac4a2;
  background: rgba(42, 196, 162, .14);
  color: #87ffd1
}

.c-vpn-https-sim__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 5.2rem;
  width: 100%;
  border-radius: .8rem;
  background: #2ac4a2;
  color: #04050b;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease
}

.c-vpn-https-sim__button:hover,
.c-vpn-https-sim__button:focus {
  background: #87ffd1
}

.c-vpn-https-sim__button:disabled {
  cursor: wait;
  opacity: .72
}

.c-vpn-https-sim__button-icon,
.c-vpn-https-sim__node-icon {
  width: 1em;
  height: 1em
}

.c-vpn-https-sim__button-icon {
  font-size: 2rem
}

.c-vpn-https-sim__visual-stack {
  display: grid;
  gap: 2.4rem
}

.c-vpn-https-sim__network {
  min-height: 26rem;
  overflow: hidden
}

.c-vpn-https-sim__network-title {
  position: absolute;
  top: 2.4rem;
  left: 2.4rem;
  z-index: 2;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a7a8b1
}

.c-vpn-https-sim__connection-line {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: .4rem;
  background: #36373d;
  transform: translateY(-50%);
  transition: background-color .3s ease, box-shadow .3s ease
}

.c-vpn-https-sim__connection-line--secure {
  background: rgba(42, 196, 162, .62);
  box-shadow: 0 0 1.2rem rgba(42, 196, 162, .45)
}

.c-vpn-https-sim__network-path {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 21.2rem;
  padding: 4.8rem 1.6rem 1.6rem
}

.c-vpn-https-sim__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 8.8rem;
  padding: 1.2rem;
  border-radius: .8rem;
  background: #0b0d15;
  color: #d8d9df;
  font-size: 1.2rem;
  line-height: 1.3;
  text-align: center
}

.c-vpn-https-sim__node-icon {
  margin-bottom: .8rem;
  font-size: 4.8rem
}

.c-vpn-https-sim__node--router {
  color: #a7a8b1
}

.c-vpn-https-sim__node--server {
  color: #87ffd1
}

.c-vpn-https-sim__router-alert {
  position: absolute;
  top: -1.8rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .5rem .7rem;
  border-radius: .5rem;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  transition: opacity .3s ease, background-color .3s ease
}

.c-vpn-https-sim__router-alert--danger {
  background: #b64b4a;
  opacity: 1
}

.c-vpn-https-sim__router-alert--secure {
  background: #2ac4a2;
  color: #04050b;
  opacity: .68
}

.c-vpn-https-sim__router-icon {
  color: #a7a8b1
}

.c-vpn-https-sim__router-icon--secure {
  color: #2ac4a2
}

.c-vpn-https-sim__router-icon.is-pulsing {
  animation: vpn-https-pulse .5s ease-out
}

.c-vpn-https-sim__packet {
  position: absolute;
  top: 50%;
  z-index: 5;
  max-width: 20rem;
  padding: .7rem 1rem;
  border: 2px solid;
  border-radius: .6rem;
  box-shadow: 0 .8rem 1.8rem rgba(0, 0, 0, .28);
  font-family: monospace;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: vpn-https-send-packet 4s linear forwards
}

.c-vpn-https-sim__packet--danger {
  border-color: #b64b4a;
  background: #ffe8e8;
  color: #5a1717
}

.c-vpn-https-sim__packet--secure {
  border-color: #2ac4a2;
  background: #123d36;
  color: #87ffd1
}

.c-vpn-https-sim__terminal {
  display: flex;
  flex-direction: column;
  min-height: 26rem;
  overflow: hidden;
  background: #030407
}

.c-vpn-https-sim__terminal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid #36373d;
  background: #0b0d15
}

.c-vpn-https-sim__terminal-title {
  font-family: monospace;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.4
}

.c-vpn-https-sim__terminal-title--danger {
  color: #ffb4b4
}

.c-vpn-https-sim__terminal-title--secure {
  color: #87ffd1
}

.c-vpn-https-sim__terminal-clear {
  flex: 0 0 auto;
  background: none;
  color: #a7a8b1;
  font-size: 1.2rem;
  line-height: 1.4;
  cursor: pointer
}

.c-vpn-https-sim__terminal-clear:hover,
.c-vpn-https-sim__terminal-clear:focus {
  color: #fff
}

.c-vpn-https-sim__terminal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.6rem;
  font-family: monospace;
  font-size: 1.2rem;
  line-height: 1.5
}

.c-vpn-https-sim__terminal-body::-webkit-scrollbar {
  width: .8rem
}

.c-vpn-https-sim__terminal-body::-webkit-scrollbar-track {
  background: #0b0d15
}

.c-vpn-https-sim__terminal-body::-webkit-scrollbar-thumb {
  border-radius: .4rem;
  background: #36373d
}

.c-vpn-https-sim__log-muted {
  color: #6f7079
}

.c-vpn-https-sim__log-line {
  color: #a7a8b1
}

.c-vpn-https-sim__log-line span {
  color: #6f7079
}

.c-vpn-https-sim__log-line--danger {
  color: #ff8f8f;
  font-weight: 700
}

.c-vpn-https-sim__log-line--secure {
  color: #87ffd1
}

.c-vpn-https-sim__log-line--system {
  color: #66c8ff
}

.c-vpn-https-sim__spinner {
  width: 1.8rem;
  height: 1.8rem;
  border: .3rem solid rgba(4, 5, 11, .3);
  border-top-color: #04050b;
  border-radius: 50%;
  animation: vpn-https-spin .7s linear infinite
}

@keyframes vpn-https-fade-in {
  from {
    opacity: 0;
    transform: translateY(-1rem)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes vpn-https-send-packet {
  0% {
    left: 8%;
    opacity: 0;
    transform: scale(.5) translateY(-50%)
  }

  10% {
    opacity: 1;
    transform: scale(1) translateY(-50%)
  }

  45% {
    left: 45%;
    transform: scale(1) translateY(-50%)
  }

  50% {
    left: 50%;
    transform: scale(1.1) translateY(-50%)
  }

  55% {
    left: 55%;
    transform: scale(1) translateY(-50%)
  }

  90% {
    opacity: 1;
    transform: scale(1) translateY(-50%)
  }

  100% {
    left: 88%;
    opacity: 0;
    transform: scale(.5) translateY(-50%)
  }
}

@keyframes vpn-https-pulse {
  50% {
    color: #87ffd1;
    transform: scale(1.08)
  }
}

@keyframes vpn-https-spin {
  to {
    transform: rotate(360deg)
  }
}

@media (min-width:1024px) {
  .c-vpn-https-sim__grid {
    grid-template-columns: minmax(28rem, 1fr) minmax(0, 2fr)
  }
}

@media (max-width:767px) {
  .c-vpn-https-sim {
    padding: 4.8rem 0
  }

  .c-vpn-https-sim__title {
    font-size: 3rem
  }

  .c-vpn-https-sim__field-grid {
    grid-template-columns: 1fr
  }

  .c-vpn-https-sim__network-path {
    padding-right: 0;
    padding-left: 0
  }

  .c-vpn-https-sim__node {
    min-width: 7.2rem;
    padding: .8rem
  }

  .c-vpn-https-sim__node-icon {
    font-size: 3.6rem
  }
}

@media (max-width:440px) {
  .c-vpn-https-sim__panel {
    padding: 1.6rem
  }

  .c-vpn-https-sim__packet {
    max-width: 13rem
  }
}