@keyframes writeLine {
  0% {
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
  }
  100% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  }
}
@keyframes keydown {
  0% {
    fill-opacity: 0.1;
  }
  15% {
    fill-opacity: 0.3;
  }
  30% {
    fill-opacity: 0.1;
  }
}
@keyframes appOpen {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.mac-wrapper {
  width: 100%;
  max-width: 380px;
  margin: 0 0 0 45px;
}
.mac-wrapper svg {
  height: auto;
}
.mac-wrapper svg #CodeEditorWindow {
  display: none;
}
.mac-wrapper.start #CodeEditorWindow {
  display: block;
  animation: 0.5s ease-out 0s 1 normal forwards appOpen, 0.5s ease-out 27s 1 reverse forwards appOpen;
  transform-origin: center center;
}
.mac-wrapper.start [id^="codeline"] {
  clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
  animation: writeLine 1s linear forwards;
}
.mac-wrapper.start #codeline1 {
  animation-delay: 1s;
}
.mac-wrapper.start #codeline2 {
  animation-delay: 2s;
}
.mac-wrapper.start #codeline3 {
  animation-delay: 3s;
}
.mac-wrapper.start #codeline4 {
  animation-delay: 4s;
}
.mac-wrapper.start #codeline5 {
  animation-delay: 5s;
}
.mac-wrapper.start #codeline6 {
  animation-delay: 6s;
}
.mac-wrapper.start #codeline7 {
  animation-delay: 7s;
}
.mac-wrapper.start #codeline8 {
  animation-delay: 8s;
}
.mac-wrapper.start #codeline9 {
  animation-delay: 9s;
}
.mac-wrapper.start #codeline10 {
  animation-delay: 10s;
}
.mac-wrapper.start #codeline11 {
  animation-delay: 11s;
}
.mac-wrapper.start #codeline12 {
  animation-delay: 12s;
}
.mac-wrapper.start #codeline13 {
  animation-delay: 13s;
}
.mac-wrapper.start #codeline14 {
  animation-delay: 14s;
}
.mac-wrapper.start #codeline15 {
  animation-delay: 15s;
}
.mac-wrapper.start #codeline16 {
  animation-delay: 16s;
}
.mac-wrapper.start #codeline17 {
  animation-delay: 17s;
}
.mac-wrapper.start #codeline18 {
  animation-delay: 18s;
}
.mac-wrapper.start #codeline19 {
  animation-delay: 19s;
}
.mac-wrapper.start #codeline20 {
  animation-delay: 20s;
}
.mac-wrapper.start #codeline21 {
  animation-delay: 21s;
}
.mac-wrapper.start #codeline22 {
  animation-delay: 22s;
}
.mac-wrapper.start #codeline23 {
  animation-delay: 23s;
}
.mac-wrapper.start #codeline24 {
  animation-delay: 24s;
}
.mac-wrapper.start #codeline25 {
  animation-delay: 25s;
}
.mac-wrapper.start #codeline26 {
  animation-delay: 26s;
}
.mac-wrapper.start #keyboard15 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1958ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard6 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1009ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard43 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1807ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard31 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1640ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard47 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1447ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard42 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1369ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard20 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1252ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard42 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1793ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard40 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1554ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard28 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1991ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard24 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1432ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard41 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1068ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard28 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1628ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard32 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1659ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard37 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1753ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard34 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1014ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard42 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1527ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard4 {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 1119ms;
  animation-iteration-count: 26;
}
.mac-wrapper.start #keyboard-return {
  animation-name: keydown;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-iteration-count: 26;
}